ARIAロールとプロパティ アクセシビリティ監査

ARIAロールとプロパティの監査

ARIA（Accessible Rich Internet Applications）属性は、カスタムUIコンポーネントと支援技術の間のギャップを埋めます。WCAG基準4.1.2（名前、役割、値）と4.1.3（ステータスメッセージ）は正しいARIA使用に直接依存しています。

ARIAを使用するタイミング

ARIAの第一のルールは：ネイティブHTMLで同じ結果を達成できる場合はARIAを使用しない。ネイティブの <button>、<input>、<select>、<nav> 要素にはビルトインのアクセシビリティがあります。

ARIAが必要な場合：

• カスタムウィジェットの構築（タブ、アコーディオン、コンボボックス）
• 動的コンテンツ更新の作成（ライブリージョン）
• 追加コンテキストの提供（説明、ラベル）
• HTML5セマンティクスを超えたページランドマークの定義

監査すべき主なARIA属性

ロール: カスタムウィジェットが正しいロールを使用していることを確認：

• タブインターフェースに role="tablist"、role="tab"、role="tabpanel"
• モーダルダイアログに role="dialog"
• アプリケーションメニューに role="menu"、role="menuitem"
• 重要な時間的に敏感なメッセージに role="alert"

状態: 動的状態が更新されていることを確認：

• 折りたたみセクションに aria-expanded="true/false"
• タブとリスト項目に aria-selected="true/false"
• カスタムチェックボックスに aria-checked="true/false"
• 無効なコントロールに aria-disabled="true/false"

プロパティ: 関係が定義されていることを確認：

• アクセシブル名に aria-label または aria-labelledby
• 追加説明に aria-describedby
• トリガー要素と制御領域を接続する aria-controls
• 動的コンテンツ更新に aria-live="polite/assertive"

よくあるARIAの間違い

1. ネイティブHTMLの代わりにARIAを使用 — <button> の代わりに <div role="button">
2. 不正確なロール階層 — role="tablist" 内にない role="tab"
3. 必要な子要素の欠落 — role="listitem" 子要素のない role="list"
4. 古いARIA状態 — トグル時に更新されない aria-expanded
5. 競合するロール — 暗黙のロールを持つ要素にARIAロールを適用