ヘッダーをスキップして本文へ進む

ターフ:携帯電話向けモバイルコンテンツ開発/Java,BREWアプリ/Webページ制作/視覚障害,色覚障害アクセシビリティ向上/SEO

〒330-0074 埼玉県さいたま市浦和区北浦和4-1-11 岩崎ビル2F 048-814-3025

有限会社 ターフ

ターフのWebデザイン - アクセシビリティWeb、JIS X 8341-3対応

視覚障害者対応アクセシビリティデザインサンプル

  ここでは、ホームページのアクセシビリティを向上させるために配慮しなければならない大切な項目について、いくつか例を挙げてご説明いたします。

  本項でご説明する対応は、ごく一部であり、その他にも数多くの配慮しなければならない項目があります。詳細は、弊社アクセシビリティ担当までお問い合わせ下さい。

→ ホームページ制作における視覚障害者への配慮へ

色覚障害者、白内障の方向けの配慮

1.色だけで情報を伝えない

  例えば以下のような記述があるとします。ここでは、健常者の方でも実感しやすいように画像で説明しています。

これは赤緑黄の3色を色だけで識別させる悪いサンプルの画像です

  これを色覚障害を持った方がご覧になったら、どのように見えるのでしょうか。左から順に第一色盲(色弱)、第二色盲(色弱)、第三色盲(色弱)のシミュレーション結果が並んでいます。

赤緑黄の3色を色だけで識別させる悪いサンプルの画像を第一色盲の方がご覧になった画像のシミュレーション結果です 赤緑黄の3色を色だけで識別させる悪いサンプルの画像を第二色盲の方がご覧になった画像のシミュレーション結果です 赤緑黄の3色を色だけで識別させる悪いサンプルの画像を第三色盲の方がご覧になった画像のシミュレーション結果です

  いかがでしょうか。どの「丸」をクリックして良いのか、判断がつかないことが良く分かります。こういった場合は、色だけで情報を伝えるのではなく、文字でも補足情報を記述しておく必要があるのです。

2.識別可能な配色を利用する

  文字の配色にも注意が必要です。

  「1.色だけで情報を伝えない」の例でも分かるように、色覚に障害を持つ方には識別しにくい配色というものがあります。例えば、以下のような配色の文字があるとします。ここでは、黄緑色の地色の上に明るい黄色で「カラーサンプル1」という文字が書かれています。

色覚障害者が識別しにくい配色の悪い例を表した画像です

  そもそも健常者でさえ見にくい配色ではありますが、「緑色」と「黄色」、組み合わせて使いたくなる色ではないでしょうか。これを色覚障害を持った方がご覧になったら、どのように見えるのでしょうか。左から順に第一色盲(色弱)、第二色盲(色弱)、第三色盲(色弱)のシミュレーション結果が並んでいます。

悪い例の画像を第一色盲の方がご覧になった場合のシミュレーション画像です 悪い例の画像を第二色盲の方がご覧になった場合のシミュレーション画像です 悪い例の画像を第三色盲の方がご覧になった場合のシミュレーション画像です

  このように、制作者の意図とは全く違ったデザインになるだけでなく、配色によっては文字そのものが識別できないのです。文章中の文字を強調したい場合は、配色を考慮するとともに、太字にする、斜体にする、大きさを変えるなどの、色以外の情報も付加すべきなのです。

3.最後に

  色覚障害(色盲)は、「分かりにくい障害」とも言われ(遺伝的なものであり、障害ではないという議論についてはここでは保留させて頂きます)、日本人男性の約20人に1人、女性では500人に1人の割合で何らかの色覚障害を持っているという調査結果があります。

  日本だけでも310万人以上、世界中では、2億人以上にものぼります。これに、加齢による白内障の方を含めれば、想像を絶する人数になることは言うまでもありません。

  インターネットのバリアフリー化を実現するためには、色づかいへの配慮が必須なのです。

→ ホームページ制作における視覚障害者への配慮へ

このWebページは、W3Cで規定されている正しいHTML文法(HTML 4.01 Strict)に則って記述されていることが検証されています。

Valid HTML 4.01!

このWebページで使用しているスタイルシートは、W3C CSS 検証サービスにおいて正当なものと検証されています。

Valid CSS!

十人十色覚同盟