WAI-ARIA 1.2
WAI-ARIA 1.2 概要
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）は、動的コンテンツや高度なUIコントロールのアクセシビリティを 向上させるためのW3C仕様です。HTMLだけでは表現できないセマンティクスを補完し、 支援技術がウェブアプリケーションを正しく解釈できるようにします。
ARIAはいつ使うのか？
- ●ネイティブHTMLに同等の要素が存在しない場合（例: タブパネル、ツリービュー）
- ●動的に更新されるコンテンツをスクリーンリーダーに通知したい場合（ライブリージョン）
- ●要素間の関係を明示したい場合（aria-describedby, aria-controls 等）
- ●ネイティブHTMLで対応できる場合は使わない（<button> の代わりに div + role="button" は避ける）
ARIAの5つのルール
1
ネイティブHTMLを優先する
目的に合うネイティブHTML要素やHTML属性が存在する場合、要素を転用してARIAのロール・ステート・プロパティを追加する代わりに、それを使用しましょう。
2
ネイティブのセマンティクスを変更しない
どうしても必要な場合を除き、ネイティブのセマンティクスを変更しないでください。例: 見出しをタブにするなら <h2 role="tab"> ではなく <div role="tab"><h2>...</h2></div> にします。
3
すべてのインタラクティブARIAコントロールをキーボードで操作可能にする
ウィジェットにARIAロールを付与した場合、キーボードによる操作もサポートしなければなりません。
4
フォーカス可能な要素に role="presentation" や aria-hidden="true" を使わない
フォーカス可能な要素を視覚的に表示しつつスクリーンリーダーから隠すと、キーボードユーザーに「見えないフォーカス」が生じます。
5
すべてのインタラクティブ要素にアクセシブルな名前を持たせる
インタラクティブ要素には、アクセシビリティAPIからアクセスできる名前（アクセシブルネーム）が必要です。
アクセシビリティツリーとは？
ブラウザはDOMを元に「アクセシビリティツリー」を構築し、スクリーンリーダーなどの 支援技術に提供します。ARIA属性はこのツリーの内容を変更・補完します。 下のデモでプレーンdivとセマンティックHTMLの違いを確認しましょう。
アクセシビリティツリーの比較
HTMLソース
<div>
<div>こんにちは</div>
<div>ここをクリック</div>
<div>送信</div>
</div>アクセシビリティツリー
generic
generic(テキスト) こんにちは
generic(テキスト) ここをクリック
generic(テキスト) 送信
div のみの場合、スクリーンリーダーには「テキスト」としか伝わらず、構造や操作方法が分かりません。