Level AWCAG 2.2
2.5.3 ラベルと名前
視覚的なラベルを含むUIコンポーネントのアクセシブルな名前にそのテキストが含まれている。
なぜ重要か
音声操作
画面に「検索」と表示されているのにaria-labelが違うと、「検索をクリック」で動かない。
スクリーンリーダー
視覚ラベルと読み上げが異なると、晴眼者の支援を受けにくくなる。
認知障害
表示と読み上げの不一致は混乱の原因。一貫性が理解を助ける。
共同作業
「検索ボタンを押して」と言われても、支援技術では見つからない場面が生じる。
ライブデモ
ラベルとアクセシブルネーム
視覚的なラベルとアクセシブルネームが一致していません。音声操作ユーザーが混乱します。
ボタン
表示: "検索"
aria-label: "find-content"
aria-label: "find-content"
入力欄
メールアドレス
表示: "メールアドレス"
aria-label: "email-input"
aria-label: "email-input"
音声コマンドシミュレーション
ユーザー: "検索をクリック"
→ 失敗: "検索"というアクセシブルネームの要素が見つかりません
視覚ラベルとアクセシブルネームが不一致
ペルソナで理解する
高橋さん（45歳）— 頸髄損傷
音声認識でPCを操作しています。画面に「送信」と書いてあるボタンに「送信をクリック」と言うのに、aria-labelがsubmit-formだと何も起きない。毎回すべての番号を読み上げさせて操作するのは本当に疲れます。