前回「Vol.1-Bootstrap4に学ぶ、アクセシビリティ(WAI-ARIA)対応のレスポンシブWebサイト制作」では、「role=”group”」「aria-label」と「aria-label」について学びました。
今回は、Bootstrap4の「Button Dropdown」コンポーネントを用いて「aria-haspopup, aria-expanded」を学びます。
まずは、「Button Dropdown」のソースコードから見てみましょう！
ドロップダウンボタンを３つ並べるソースコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div><!-- /btn-group --> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div><!-- /btn-group --> |
下記のボタン群が上記HTMLの表示結果です。
buttonタグにの属性としてaria-haspopupとaria-expandedが記述されていますね。
aria-haspopupは、その要素のサブメニュー（下位の項目）が存在するかを定義します。上記で記述したButton Dropdownの場合、aria-haspopup="true"となっていますので、サブメニューが存在するということになります。
aria-expandedは、状態を表す属性となります。要素がアクティブであればaria-expanded="true"要素が非アクティブであればaria-expanded="false"となります。
実際に動作を確認してみましょう
Mac環境なので確認には、スクリーンリーダーであるVoiceOverを利用しました。
Macを利用している方は、Command + F5でOn・Offが簡単に切り替えられます。
ブラウザは、キー操作で閲覧がしやすい、Chromeを利用しました。
VoiceOverをONにして、キー操作（Tabを押下）で「Default」と記述されたbuttonタグにアクセスした状態です。ポップアップボタンであることを、Voice Overが教えてくれます。
少し待つと今ポップアップボタンの上にいてoption + shift + spaceを押すとサブメニューのOn・Offが可能なことを教えてくれます。キー操作をしてサブメニューを開いてみましょう。
サブメニューが開くと、Javascriptによりaria-expanded="true"に変わりサブメニューがアクティブな状態であることを示しました。
私が試したところ下矢印キーやreturnキーでもメニューが開きました。
また、buttonタグ上にフォーカスがある状態でescキーを押すことで、表示されているサブメニューを非表示にできました。
非表示になった状態では、もちろんaria-expanded="false"となりました。
サブメニューがアクティブな場合にtabキーを押すとサブメニューに遷移し、サブメニューが非アクティブな場合、サブメニューをスキップし次の対象に移ります。非常に親切に作られていますね。
まとめ
今回は、WAI-ARIAを実装することによって、支援技術をサポートできること非常にパワフルな側面を垣間見れたのではないでしょうか。
Bootstrapを利用する、もしくはBootstrapをカスタマイズしWEBサイトを構築すると、WAI-ARIAに関するJavascript処理が元々組み込まれているため、HTMLの記述を間違えなければアクセシビリティ対応やレスポンシブも対応の負荷が軽くなります。
これをこれからのホームページ制作に活かさない手はないですね。
