2.5.3 表示するラベルが実装上のテキストに含まれている
適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
視覚的に見える文字（label）と、実装上のテキスト（name）が異なると、操作方法によってはユーザーの混乱を招く可能性がある。両者に同じテキストを含めることが望ましい。
たとえばスクリーンリーダーや音声入力でサービスを利用する際に、「Post」と表示されているラベルのボタンの実装が submit となっていると、操作性が著しく低下する。
テスト・チェック方法
- コードレビュー
- スクリーンリーダーの読み上げと、表示上のラベルに一致しているか含まれていること
実装方法
ボタンラベル
Web
悪い実装例
aria-labelで表示されたテキストは「Find in this site」だが、視覚的に表示されるテキストは「Go」で一致していない。
<button aria-label="Find in this site">Go</button>
良い実装例
aria-labelで表示されたテキストと視覚的に表示されるテキストが一致している。
<button aria-label="Go">Go</button>
Android
layoutにattributeandroid:contentDescriptionを適切に設定する。
悪い実装例
<Button
android:text="詳細を見る"
android:contentDescription="詳細ボタン" />
良い実装例
<Button
android:text="詳細を見る"
android:contentDescription="詳細を見る" />
iOS
NSObjectクラスのextensionに定義されているaccessibilityLabelを設定する。
悪い実装例
var button: UIButton = UIButton()
button.setTitle("Go", for: .normal)
button.accessibilityLabel = "Find in this site"
良い実装例
var button: UIButton = UIButton()
button.setTitle("Go", for: .normal)
button.accessibilityLabel = "Go"