Accessibility
Guidelines

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

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

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

レビュー・テスト方法

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

実装方法

ボタンラベル

良い実装例

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

<button aria-label="Go">Go</button>

悪い実装例

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

<button aria-label="Find in this site">Go</button>

参考文献