Accessibility
Guidelines

2.5.3 表示するラベルが実装上のテキストに含まれている

視覚的に見える文字(label)と、実装上のテキスト(name)が異なると、操作方法によってはユーザーの混乱を招く可能性がある。両者に同じテキストを含めることが望ましい。

たとえばスクリーンリーダーや音声入力でサービスを利用する際に、「Post」と表示されているラベルのボタンの実装が submit となっていると、操作性が著しく低下する。

レビュー・テスト方法

  • コードレビュー
  • スクリーンリーダーの読み上げと、表示上のラベルに一致しているか含まれていること

実装方法

ボタンラベル

Web

良い実装例

aria-labelで表示されたテキストと視覚的に表示されるテキスト

<button aria-label="Go">Go</button>
悪い実装例

aria-labelで表示されたテキストは「Find in this site」だが、視覚的に表示されるテキストは「Go」で不一致。

<button aria-label="Find in this site">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 = "Go"
悪い実装例
var button: UIButton = UIButton()
button.setTitle("Go", for: .normal)
button.accessibilityLabel = "Find in this site"

参考文献