Accessibility
Guidelines

1.3.3 感覚的な特徴だけで説明しない

コンテンツは感覚的な特徴(色や形、音や位置など)だけで説明しない。

コンテンツの説明が感覚的な特徴だけだと、個人の感覚や端末に依存してしまい理解できないことがある。

レビュー・テスト方法

  • デザイン時、モノクロ表示にして意味が伝わるか検討する
  • 実装時、拡大・縮小を行っても意図が伝わる説明になっているかを検討する

具体例

悪い例

形や位置のみでコンテンツを特定している。この場合、スクリーンリーダーのユーザーにはどのボタンかが分からない。狭いウィンドウ幅で見た時や拡大表示したときに、表示位置が代わり、理解できなくなることもある。

<p>右下のボタンを押して下さい。</p>
  • フォームの必須項目を色だけで説明しているNG例
    Bad フォームの必須項目を色だけで説明している。赤色が区別しづらい人にはどれが必須かわからない。

良い例

位置だけでなく、特定するための追加情報(この例だとボタンのラベル)が含まれている。

<p>右下の「前へ戻る」ボタンを押して下さい。</p>
  • フォームの必須項目をテキストで補足し説明しているOK例
    Good フォームの必須項目をテキストで補足し説明している。個人の感覚に依存せず、理解することが出来る。
  • フォームの必須項目をテキストで補足し、さらに太字と赤文字で強調しているOK例
    Good 必須項目をテキストで記載し、太字や赤文字で装飾している。より直感的に多くのユーザーに強調して伝えることができる。

参考文献