原稿作成及びテキスト入力のアクセシビリティ指針
優先度1



解説

色の名前やディスプレイ上での形、位置等の情報は、音声でしかWebにアクセスできない人にとっては、理解できないものです。また、色盲・色弱のユーザーやグレースケールのモニタでページを閲覧しているユーザーにとっては、色だけに依存した表現は理解できないことがあります。
文章の作成段階から、このような表現を避けるようにします。


実例

  • できる限りテキスト情報だけでも識別できるような表現にします。
  • 色の名前を使って表現する場合、形でも認識できるようにします(その逆についても同様)。
  • ディスプレイ上の表現においては、右・左・上・下等の位置に依存した表現を出来るだけ避けます。
色や形・位置に依存している実例
悪い例 解説

赤色の部分が更新された情報です。

色盲・色弱のユーザーにとって識別が困難、また音声ブラウザを利用しているユーザーにとって識別が不可能です。
また、テキストの色はユーザーの設定によって違う色になっている可能性があります。

詳しくは、右側のボタンをクリックしてください。


悪い例の画面イメージ。画像にリンクがはられており、説明文では、右側の画像をクリックするように指示しています。

音声ブラウザを利用しているユーザーにとって識別が困難です。
スタイルシートをOFFにしているユーザー、極端に狭い画面で閲覧しているユーザーにとっては、位置関係が変わる可能性があります。


良い例のイメージ。テキスト部分にもリンクがはられています。

入力例:
○:106-0066
×:106−0066

音声ブラウザの種類や設定によっては、記号は読み上げられない可能性があります。
また、全角・半角等の違いについても、音声では判別できません。

○よい例:106-0066(半角)
×悪い例: 106−0066(全角)



関連するJISの項目

5.5 a,b,c (必須)




アクセシビリティガイドライン トップ

このページの先頭へ戻る