とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

サクッとアクセシビリティを確認するのに便利。色覚シミュレーションアプリ「色のシミュレータ」

サクッとアクセシビリティを確認するのに便利。色覚シミュレーションアプリ「色のシミュレータ」

今回は少しだけアクセシビリティよりのお話。便利なアプリを紹介します。
「色のシミュレータ」です。

色のシミュレータ

色のシミュレータ

  • Kazunori Asada
  • 教育
  • 無料

apps.apple.com

 

アプリの紹介テキストをそのまま引用します。

「色のシミュレータ」は、様々な色覚特性を持つ人の色の見え方を体験するための色覚シミュレーションツールです。医学博士・メディアデザイン学博士である作者により、色彩学の理論を使用して開発されました。

男性の約5%が、赤と緑の色の区別がしにくい、濃い赤が見えにくいなどの色覚的な特徴を持っていると言われています。色覚タイプには主に、C:一般型、P:1型、D:2型、T:3型などがあることが知られており、それぞれのタイプや強度によって色の見え方が違います。

1〜3型の色覚タイプを持つ人は、一般型の人なら異なって見える色の組み合わせの多くが、同じ色に見えてしまうという特徴があります。例えば、1型や2型の人は、赤と緑、ピンクと水色などの区別が難しい場合があります。

これらの色の見えは、色を感知する錐体細胞の働きを計算することによって、ある程度予測することが可能です。

「色のシミュレータ」は、内蔵カメラから得た動画像や保存された写真画像をリアルタイムに変換し、それぞれの色覚タイプ(2色覚)ではどのように色が見えるのか、シミュレーションを行います。

 

というわけで、カメラ起動して見るだけで、各色覚タイプの見え方をシミュレーションすることが可能です。

 

色覚シミュレーションアプリ「色のシミュレータ」のスクショ

色覚シミュレーションアプリ「色のシミュレータ」の例

 

色使いや視認性はWebサイトでは重要です。

このアプリを使えば、色覚特性を持つ人の色の見え方が体験できるので、見えづらい色使いになっていないか、視認性が悪くなっていないかチェックができるので、おすすめです。

 

 

アクセシビリティが要件になるweb案件

クライアントワークでアクセシビリティが要件に入ることがあります。

役所や自治体系のWebサイトや、空港などの公共施設、メディア系のWebサイトなど幅広いユーザをターゲットとしているサイトではだいたい必須の要件です。

 

 

どこまでやるかの指標が必要

 

どこまでやるかというところもありますが、基本中の基本である「視認性」や「色」はこういったツールを使ってチェックするのが工数も少なく済むでしょう。背景色やテキスト色などをユーザに選択させるなどアクセシビリティを考慮して実装するとなるとそこそこコストもかかりますし、専門知識も必要になります。

 

自治体系のWebサイトをよくやっているようなWeb制作会社はノウハウもあり、得意としてそういった案件をとっていく制作会社もあるとおもいます。ただ、そこまでの要件ではないサイト、一般的なWebサイトであればこういったツールやアプリでサクッと確認しておく程度で十分だと思います。

 

今回紹介したもの以外でも、色覚シミュレーターアプリやツールはいろいろありますが「色のシミュレータ」が一番かんたんで使いやすい印象でした。

 

参考:

www.color.or.jp designcolor-web.com

 

 

アクセシビリティ方針が参考になるwebサイト

アクセシビリティをどこまでやるか、ガチでやるのか。
方針はさまざまですが、総務省や内閣府のWebサイトではアクセシビリティ方針がしっかりと掲載されています。アクセシビリティが要件のサイトを製作する機会があれば、見ておいて損はないでしょう。

 

 

アクセシビリティの要件をざっくりいうと、障害のお持ちの方や、子供からお年寄りまで、ユーザーの状況に関わらず快適に使用できるサイトの設計、というところでしょう。

 

総務省や内閣府が推奨する「JIS X 8341-3:2016のウェブアクセシビリティ達成等級 AA」に準拠した構成を目指す、もしくはこれと同等のレベルで対応となるとかなりハードルが高くなり、コストもかかります。

 

JIS X 8341-3:2016 に「完全」準拠、100%対応しているWebサイトはそうそうないと思いますし、対応するにはコストや時間、工数、工期なども現実的でないことが多いので、あくまでこういったアクセシビリティのJIS基準を知った上で、理解して、つくるというところが重要だと思います。

 

 

富士通の達成基準はものすごく参考になるのと、ここまで達成していてすごいな、と思うので紹介。

JIS X 8341-3:2010 達成基準解説 - 富士通

 

あと取り組みとしていいなと思ったのが、新千歳空港のwebサイトです。バリアフリー用のページを別に用意しています。

新千歳空港ターミナルビル

 

 

そのほか、アクセシビリティの参考になるwebサイトはこちら

 

知らないで作るのと、
知っていてやるやらないを判断・選択するのは全然違いますしね。

知識として知っておきたいところです。

 

 

まとめ

総務省や内閣府が推奨する「JIS X 8341-3:2016のウェブアクセシビリティ達成等級 AA」に準拠しなくても、多様で幅広い年齢層をターゲットとしたwebサイト設計、デザイン設計を行う、というスタンスが重要ですね。

  • 画像にテキスト情報(alt属性)をつける
  • 十分にコントラストのある文字色と背景色を使う
  • サイト利用者が文字サイズや背景色を変更出来るようにする
  • リンクには下線を入れる

 

などの基本を徹底して、親切なサイト設計を目指しましょう。