WAI-ARIAとは

WAI-ARIA（Accessible Rich Internet Applications）は、ウィジェットや構造、振る舞いの意味（セマンティクス）を支援技術に伝えるためのW3Cの仕様です。現在の勧告はWAI-ARIA 1.2（2023年6月6日 W3C勧告）です。

仕様は、WAI-ARIAはホスト言語（HTML）のセマンティクスを補うものであり、置き換えるものではないとしています。HTMLに同等のアクセシビリティを提供する要素があれば、そちらを使うべきだという考え方です。例えば、見出しには div role="heading" ではなく h1 などの見出し要素を使います。

「No ARIA is better than Bad ARIA」

W3CのARIA Authoring Practices Guide（APG）は「Read Me First」で、次のような注意を示しています。

  • ARIAのロール・ステート・プロパティは、支援技術にとってのCSSのようなもので、スクリーンリーダー利用者の体験を左右する
  • 誤ったARIAは見た目の体験を誤って伝え、深刻な影響を与えうる
  • 「ロールは約束」である。HTMLのinput要素と違い、ARIAのロールはブラウザにキーボード操作やスタイルを提供させない
  • 作成者が意図せず既存のアクセシビリティ情報を上書きしてしまうことがある

よくある誤用と直し方

よくある実装何が起きるか見直しの方向
divに role="button" だけを付けるボタンと読み上げられるのに、Enter・Spaceキーで操作できないbutton要素を使う。どうしても使う場合はキーボード操作とフォーカスを実装
リンクやボタンに中身と違う aria-label を付ける画面の表示と読み上げが食い違い、音声入力でも操作しにくい表示テキストを分かりやすくし、ラベルを付けるなら表示テキストを含める
操作可能な要素の親に aria-hidden="true"キーボードでは到達できるのに、読み上げでは存在しない非表示にするなら操作もできないようにする
タブやメニューをARIAのロールだけで作る矢印キーなど期待される操作ができないAPGのパターン（Tabs、Menu Buttonなど）にあるキーボード操作を実装

点検するときのポイント

  1. ARIAを使っている部品を洗い出す（ソースの検索で role= と aria- を探す）
  2. 同等のHTML要素で置き換えられないかを検討する
  3. 残すARIAについて、キーボード操作（点検方法）とスクリーンリーダーでの読み上げ（試験の準備）を確認する
  4. 自動チェックツールのARIA関連の指摘を確認する（無料ツールの違い）

WCAG 2.2の達成基準4.1.2（名前・役割・値）は、ユーザーインターフェース部品の名前と役割をプログラムで解釈できることを求めています。ARIAはこれを満たす手段の一つですが、HTML要素を正しく使うことでも満たせます。

相談先・申込先の選び方

独自UIコンポーネント（モーダル、タブ、コンボボックスなど）が多いサイトは、テンプレート単位での診断が効率的です（テンプレート単位とページ単位）。制作会社に依頼する場合は、APGのパターンに沿った実装と、スクリーンリーダーでの確認を要件に含めます（要件書）。

出典・確認日

確認日：2026年10月12日／参照した公式・一次情報 3件