WAI-ARIA と ARIA属性 は関連する概念ですが、明確な違いがあります。
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）とは？
WAI-ARIA は、Webアプリケーションや動的コンテンツのアクセシビリティを向上させるための仕様（規格） です。
- W3C（World Wide Web Consortium） の Web Accessibility Initiative (WAI) によって策定されている標準仕様。
- JavaScriptやCSSを使って作成された カスタムUIコンポーネント や 動的コンテンツ に、アクセシビリティ情報を提供するためのフレームワーク。
- 「role（役割）」「state（状態）」「property（プロパティ）」 を定義することで、スクリーンリーダーや支援技術が正しく理解できるようにする。
つまり、WAI-ARIAは「仕様」や「ガイドライン」全体を指すもの。
ARIA属性とは？
ARIA属性は、WAI-ARIA の仕様の一部であり、具体的にHTML要素に適用される属性 です。
WAI-ARIA の仕様の中で定義されている属性には、以下の3種類があります。
ARIAロール（role）
要素の「役割」を指定します。
- role=”button”
- カスタムボタンとして認識
- role=”alert”
- 重要な通知を示す
- role=”navigation”
- ナビゲーション領域を示す
- role=”dialog”
- モーダルダイアログを示す
例：カスタムボタン
<div role="button" tabindex="0" onclick="handleClick()">クリックしてください</div>ARIAステート（state）
要素の「現在の状態」を示します。
- aria-checked=”true/false”
- チェックボックスの状態
- aria-expanded=”true/false”
- アコーディオンメニューの展開状態
- aria-hidden=”true”
- 支援技術に対して要素を非表示にする
- aria-disabled=”true”
- 無効化された要素
例：アコーディオンメニュー
<button aria-expanded="false" onclick="toggleMenu(this)">メニューを開く</button>
<div id="menu" hidden>
<p>メニューの内容</p>
</div>ARIAプロパティ（property）
要素の「特性」や「関係性」を定義します。
- aria-labelledby=”id”
- ラベルとして参照する要素を指定
- aria-describedby=”id”
- 補足説明を提供
- aria-live=”polite/assertive”
- 動的コンテンツの更新を通知
- aria-haspopup=”true”
- ポップアップメニューがあることを示す
例：ラベルを外部参照
<label id="label">ユーザー名:</label>
<input type="text" aria-labelledby="label">WAI-ARIA と ARIA属性の関係
- WAI-ARIA
- アクセシビリティを向上させるための 仕様（全体のガイドライン）
- ARIA属性
- WAI-ARIA に基づいて定義された 具体的なHTML属性
つまり、
- WAI-ARIA は「ルールや仕組み全体」を指す。
- ARIA属性 は「そのルールの中で実際にHTMLに適用できる要素」。
WAI-ARIA の仕様に従って、role、aria-expanded、aria-labelledby などの ARIA属性をHTML要素に適用する ことで、アクセシビリティを向上させるのが目的です。
まとめ
- WAI-ARIA は仕様の名称であり、ARIA属性はその仕様に基づいて定義されたHTML属性。
- WAI-ARIA には role, state, property という概念が含まれる。
- ARIA属性を適切に使うことで、スクリーンリーダーや支援技術が正しくWebコンテンツを理解できるようになる。
- ネイティブのHTML要素（button, input, label など）を優先し、WAI-ARIAはカスタム要素に対して補助的に使用する。