ホームページをユニバーサルデザインに近づける(1)

バタイユゲーム情報班のホームページは、ユニバーサルデザインになっていない。
問題点3つとその対策を以下に纏めた。
1.背景
(1)ユニバーサルデザインについて
  下記のWEBページにお世話になりました。ありがとうございます。
  ・NPO法人 カラーユニバーサルデザイン機構
  ・Webサイトにおけるカラーユニバーサルデザイン
  ・まずはここから!Webの「ユニバーサルデザイン」をはじめよう!
(2)色覚シミュレーター
  下記のWEBページにお世話になりました。ありがとうございます。
  ・色弱シミュレーター機能の使えるアプリを探してみた
  →GIMPを使うことにした。
2.問題点と対策その1
(1)問題点
  色の使い方に一貫性がない。
 (A)C型(一般色覚者)の表示例
   別のページにジャンプするメインメニュー(ゲームなど)、サブメニューの標題(サブメニュー)、
   別のページにジャンプするサブメニュー(情報班ブログなど)の3つで色の違いはある。
   しかし、別のページにジャンプするかどうかの区別が色では一目で分からない。
   (別のページにジャンプするメニューは、カーソルを載せれば背景色の変わるので分かるが・・・。)

 (B)P型色覚(赤を感じない)の表示例
   上記(A)以上に、別のページにジャンプするかどうかの区別が分からない。
   特に、サブメニューのボタンの色が薄いので、見にくい。

 (C)D型色覚(緑を感じない)の表示例
   上記(B)と同様に、別のページにジャンプするかどうかの区別が分からない。

(2)対策
  色の使い方を次の通りとする。
  ・別のページにジャンプするメニューは同じ背景色に統一する。
  ・別のページにジャンプしない標題は、背景色を付けない(ページ背景色と同じ)。
   また、標題である事を強調する為に、ボックスに境界線を付ける(サブメニュー)。
(3)対策の効果
 (A)C型(一般色覚者)の表示例

 (B)P型色覚(赤を感じない)の表示例

 (C)D型色覚(緑を感じない)の表示例

次回へつづく

 

<個人的な感想>
今まで項目によって色を変えていたが、変える理由と目的がなかった。
これからは、別ページにジャンプするかどうかで色を変えるようにした。
これなら、見易いし、理由と目的があると思う。

 

<リンク>

ブログのトップページは、こちら

バタイユゲーム情報班のホームページは、こちら