WCAG 2.2 ガイドライン「4.1.2 名前、役割、値」Level A について
はじめに
WCAG 2.2の「4.1.2 名前、役割、値」は、すべてのユーザーインターフェース（UI）コンポーネントが支援技術を含むユーザーエージェントで正しく認識され、操作できるように設計されていることを求めています。この基準により、フォームやボタン、リンクなどのインターフェース要素が、アクセシビリティ対応のために適切に構造化されます。
1. 基準の概要
要件
UIコンポーネント（例: フォーム要素、リンク、スクリプトで生成されたコンポーネント）について、以下のことが満たされる必要があります：
- 名前と役割がプログラム的に決定可能であること。
- ユーザーが設定可能な状態、プロパティ、値がプログラム的に設定可能であること。
- これらの変更が支援技術に通知可能であること。
2. 実装方法
a. 標準的なHTML要素を使用する
HTMLの標準要素を正しく使用することで、名前、役割、値が自動的に決定可能になります。
例1: フォーム要素のラベル付け
適切なlabel要素を使用して、フォームフィールドに関連付けます。
<form>
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">
</form>
例2: リンクの役割を明確にする
リンクテキストを明確に記述することで、リンクの役割を分かりやすくします。
<a href="/contact">お問い合わせ</a>
b. WAI-ARIA属性を活用する
標準HTML要素が適さない場合、WAI-ARIAを使用して名前、役割、値を明示的に定義します。
例1: aria-label でラベルを提供
ラベルが視覚的に提供されていない場合に使用します。
<button aria-label="閉じる">×</button>
例2: aria-labelledby で名前を提供
他の要素のIDを参照して名前を設定します。
<div role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">通知</h2>
<p>これは重要なお知らせです。</p>
</div>
c. カスタムUIコンポーネントのアクセシビリティを確保
カスタムコンポーネントを作成する場合、WAI-ARIAやJavaScriptを使用してアクセシビリティを実現します。
例: カスタムボタン
divをボタンとして利用する場合、役割や状態を指定します。
<div role="button" tabindex="0" aria-pressed="false" onclick="togglePressed(this)">
ボタン
</div>
<script>
function togglePressed(el) {
const isPressed = el.getAttribute('aria-pressed') === 'true';
el.setAttribute('aria-pressed', !isPressed);
}
</script>
3. アクセシビリティのメリット
a. 支援技術との互換性向上
- スクリーンリーダーがUI要素の情報を正確に取得できます。
b. ユーザー体験の向上
- 明確な役割と名前により、すべてのユーザーがコンテンツを操作しやすくなります。
c. 規格準拠
- 標準に準拠した設計は、アクセシビリティだけでなく保守性の向上にも寄与します。
4. よくある失敗例とその改善策
a. 名前や役割が不明確
失敗例
- ラベルが設定されていない入力フィールド。
改善策
label要素またはaria-labelでラベルを設定します。
b. 状態やプロパティが通知されない
失敗例
- ボタンの押下状態がスクリーンリーダーに通知されない。
改善策
aria-pressed属性を使用して状態を明示的に更新します。
c. カスタム要素に役割がない
失敗例
divやspanがボタンとして動作しているが、roleが設定されていない。
改善策
role="button"を追加して役割を指定します。
5. テスト方法
a. 手動テスト
- スクリーンリーダーを使用して、名前、役割、状態が正しく読み上げられるか確認します。
- キーボード操作でUIコンポーネントが正常に動作するかテストします。
b. 自動テストツール
- AxeやWAVEなどを使用して、アクセシビリティ要件が満たされているか確認します。
まとめ
WCAG 2.2の「4.1.2 名前、役割、値」は、支援技術との互換性を確保するための基本的な基準です。
実装ポイント
- 標準HTML要素を正しく使用する。
- WAI-ARIA属性を活用して名前、役割、値を明示的に設定する。
- カスタムコンポーネントには適切なアクセシビリティ対応を施す。
これにより、誰もが操作しやすいインターフェースを提供することが可能になります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。