BLOG

ホームページ制作・Wordpress構築やHTML5やUnity3Dでのアプリ開発など
WEBやアプリ開発に関する技術的な内容をお届けいたします。

Vol.1 – Bootstrap4に学ぶ、アクセシビリティ(WAI-ARIA)対応のレスポンシブWebサイト制作

アクセシビリティ WAI-ARIA


Bootstrap4 alphaが発表されたので、それをベースにアクセシビリティ対応(WAI-ARIA)の勉強をしていきたいと思います。
※Bootstrap4 alphaについての概要・変更点などについては「Bootstrap 4 alpha発表!SASS、ECMAScript6などに刷新!」の記事をご覧ください。

まずは、Button Groupで利用されているaria-labelとaria-labelledby

まずはButton Groupのソースコードから。

 

下記のボタン群が上記HTMLの表示結果です。




Button Groupの一番親にあたるDivに対して
「role=”group”」と「aria-label=”Button group with nested dropdown”」
属性が追加されています。

  • 「role=”group”」とは、WEBへアクセスするための支援技術によってページサマリーまたは目次に含まれることを意図されないユーザーインターフェースオブジェクトのセットのことです。
  • 「aria-label=”…”」とは、aria-labelで記述した内容は、VoiceOverなどの支援技術によって、内容が読み上げられます。

次に少し飛んでul.dropdown-menuを見てみましょう。

「aria-labelledby=”btnGroupDrop1″」の属性が追加されています。この属性によって指定されたIDの属性の内容をラベルとして扱い読み上げます。

また、動作のトリガーになるような、各インタラクティブな要素においては、buttonタグを利用しています。
buttonタグも支援技術によって読み上げられます。

このようにWAI-ARIAやHTMLを適切にマークアップすることで、
インタラクティブなWEBサイトでもよりアクセシブルなホームページ制作が可能になります。