Zenn
💨

WAI-ARIAについてまとめ

に公開
HTML
アクセシビリティ
tech

WAI-ARIAとは

WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は、アクセシブルなWebアプリケーションを構築するための仕様です。特に、動的なコンテンツや高度なユーザーインターフェイスを支えるウェブアプリケーションにおいて、スクリーンリーダーや他の支援技術を使用するユーザーがコンテンツを理解し操作できるようにするために設計されています。

WAI-ARIAの目的

  • 閲覧支援（スクリーンリーダー等）が動的コンテンツや複雑なUIを理解・操作できるようにする
  • 通常のHTMLでは不十分な部分を補完する
  • アクセシビリティ向上を目的としたプロパティや役割（role）を提供する

主な構成要素

role

タグの役割を示すために使われます。
role属性に指定できる値は、事前に定義されている文字列のみに限定されます。

例

  • role="tab": ユーザーが選択できる個々のタブ
  • role="tabpanel": 各タブに対応するコンテンツ
  • role="tablist": タブをまとめるコンテナ
  • role="dialog": ユーザーとの対話を目的としたモーダルダイアログを表す
  • role="button": クリック可能なボタン要素を表す
  • role="tooltip": 情報を補足するために表示されるツールチップを表す

その他は以下のリンクで確認できます。
MDN: ARIA Techniques

properties

property系のaria-*属性は、要素の静的な情報を保持するために使います。
これらは、要素の状態やプロパティを示し、視覚的に表現された意味を補足します。

例えば、aria-labelは要素に名前やラベルを提供し、aria-describedbyは要素の詳細な説明を示します。

例

  • aria-label
    要素にラベルを提供します。視覚的なラベルがない場合でも、スクリーンリーダーに適切な名前を伝えることができます。

  • aria-labelledby
    他の要素を参照し、その内容をラベルとして使用します。複数の要素でラベルを共有できます。

  • aria-controls
    指定した要素が他の要素を操作または制御することを示します。

  • aria-modal
    モーダルダイアログが画面全体を覆い、他のインタラクションを制限することを示します。

states

state系のaria-*属性は、要素の一時的な状態を表すのに使います。
例えば、aria-expandedは展開状態、aria-selectedは選択状態、aria-checkedはチェック状態などを伝えます。

aria-*タイプの属性は、<button>タグや<input>タグなどでも使われます。
これはrole属性と違い、意味を補足する役割を果たし、要素に状態に関する情報を提供するためです。

例

  • aria-expanded
    要素が展開されているかどうか

  • aria-checked
    チェックボックスやラジオボタンがチェックされているか

  • aria-selected
    要素が選択されているか

  • aria-hidden
    要素が支援技術に表示されるかどうか

WAI-ARIAを使う際の注意点

ネイティブHTMLを優先する

多くのアクセシビリティ機能はHTML要素に組み込まれているため、まずHTMLでできる限り対応することが推奨されます。
例: <button>や<input>には元から適切な役割が含まれている

過剰なARIAの使用を避ける

不必要なARIA属性を追加すると、アクセシビリティが損なわれる場合があります。

ARIAの相互関係を理解する

例えば、aria-labelledbyでラベルを設定する際、ラベルとなる要素が視覚的に関連づけられている必要があります。
このように相互関係を理解した上で設定することが重要です。

使用例

モーダルダイアログ

モーダルを表示する際に、role="dialog"を使用し、適切なフォーカスマネジメントを行います。

<button id="openModal">モーダルを開く</button> 
<div id="modal" role="dialog" aria-labelledby="dialogTitle" aria-hidden="true"> 
  <h2 id="dialogTitle">モーダルダイアログ</h2> 
  <p>ここはモーダルダイアログの内容です。</p> 
  <button id="closeModal">閉じる</button> 
</div> 

<script> 
const openModal = document.getElementById("openModal"); 
const closeModal = document.getElementById("closeModal"); 
const modal = document.getElementById("modal"); 

openModal.addEventListener("click", () => { 
  modal.setAttribute("aria-hidden", "false"); 
  modal.style.display = "block"; 
}); 

closeModal.addEventListener("click", () => { 
  modal.setAttribute("aria-hidden", "true"); 
  modal.style.display = "none"; 
}); 
</script>

role="dialog"

この要素がモーダルダイアログであることを明示します。

aria-labelledby

モーダルのタイトルを指定します。

aria-hidden

モーダルの表示状態を支援技術に伝えます。

まとめ

WAI-ARIAはアクセシビリティを向上させる強力なツールですが、適切に使用しないと逆効果になる可能性があります。まずはHTMLで解決可能なアクセシビリティ要件を満たし、必要な場合にのみWAI-ARIAを補助的に使うことが重要です。
MDNの記事では、具体的な例やコードサンプルを通して、WAI-ARIAの基本的な概念と実装方法を学ぶことができます。

Discussion