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

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

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

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

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Dropdown

</button>

<li><a href="#">Dropdown link</a></li>

</ul>

</div>

下記のボタン群が上記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サイトでもよりアクセシブルなホームページ制作が可能になります。

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

関連投稿