WAI-ARIA（ウェイ-アリア）の基本調べてみた

WAI-ARIAとは？

WAI-ARIA（ウェイ-アリアと発音）とは Web Accessibility Initiative Accessible Rich Internet Applications の頭文字からできた言葉です。
W3Cが発行しているWebアプリケーションをよりアクセシブルにするための仕様です。

HTMLはタグ一つひとつの要素にセマンティクス（意味）を持っています。
ただ、HTMLだけではどうしても表現できないことがあります。
それを補完するのがWAI-ARIAです。

スクリーンリーダーなどの支援技術を通して、障がいを持った人でも適切に情報を取得することが可能になります。

WAI-ARIAの機能

WAI-ARIAには主に3つの機能があります。

• WAI-ARIAロール 要素の役割を定義します
  • role="navigation"、role="button"など
• WAI-ARIAプロパティ 要素の性質を定義します
  • aria-required="true"、aria-labelなど
• WAI-ARIAステート 要素の状態を定義します
  • disabled="true"、 checked="checked"など

いつWAI-ARIAを使えばいい？

WAI-ARIAの基本 - ウェブ開発を学ぶ | MDNによると4つの場面があります。

1. 道しるべ/ランドマーク
   • nav、search、 tablist、 tab、 listbox
2. 動的コンテンツの更新
   • プログレスバーなど、aria-live属性で伝える
3. キーボードのアクセシビリティ向上
   • tabindex でtabキーでフォーカスをコントロールする
4. 意味論的ではないコントロールのアクセシビリティ
   • divや、Javascriptによって大きく変更されているHTMLタグなど、アクセシビリティの提供が困難になるので、roleを組み合わせたりaria-requiredやaria-posinsetなどで補います

WAI-ARIAの注意点

WAI-ARIAは補完するものです。
WAI-ARIAは必要な場合のみ使用すると良いようです。

1. セマンティックなHTMLを優先的に使う
2. HTML要素の意味はむやみに変えない
3. キーボードで操作できるようにする

参考

• WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
• Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳
• 井原力也.小林大輔.益田草一山本伶.「Webアプリケーションアクセシビリティ今日から始める現場からの改善」.技術評論社,2023