色のアクセシビリティ・チェックツール Fujitsu Accessibility Assistance
- 投稿日：2010年2月 3日 13:05
- カテゴリ：サービス、アプリ
こんにちは、先週から花粉症のお薬を飲んでいるHitoyamです。
さて、アクセシビリティ強化月間ということで、前回はカラー・コントラスト・アナライザーを取り上げました。今回のシリーズ第2弾は、富士通アクセシビリティ・アシスタンスの紹介です。
Fujitsu Accessibility Assistance 富士通アクセシビリティ・アシスタンス
ユニバーサルデザインに力を入れている富士通さんで無償配布しているのが、Fujitsu Accessibility Assistanceです。Fujitsu Accessibility AssistanceはWebInspector（ウェブインスペクター）、ColorSelector（カラーセレクター）、ColorDoctor（カラードクター）の3つのツール群で構成されています。
WebInspector（ウェブインスペクター）
WebInspectorはHTMLとCSSの中身をチェックして、問題点を指摘してくれるツールです。「JIS X 8341-3 高齢者・障害者等配慮設計指針 ‐情報通信における機器、ソフトウェア及びサービス‐ 第3部：ウェブコンテンツ」と「富士通ウェブ・アクセシビリティ指針 第2.01版」の両方に対応しています。
ただし、私が気付いた限りでは、ちょっとした注意点があるので挙げておきます。
まず、白い背景 #ffffff; (R:255,G:255,B:255) にグレーの文字 #333333; (R:51,G:51,B:51)、#666666; (R:102,G:102,B:102)、#999999; (R:153,G:153,B:153)、#cccccc; (R:204,G:204,B:204) を設定したサンプル01のチェックをします。そうすると、このファイルはすべてのチェックをクリアしました。優秀なページです。
と表示されます。
次に、見た目には全く同じに見える（はずの）設定のサンプル02のチェックをします。すると今度は、問題点が、30件ありました。
と表示されてしまいました。あれ？ 使ってる色は同じはずなのに、なんで？
実は2つのファイルの違いは、CSSでの body の記述、たった1行だけ。
サンプル01では body の背景色を記述しておらず、サンプル02では body { background:#ffffff; } と記述しています。どうやらCSS側で背景色を明示していないと、実際の見た目と異なるフィードバックが返ってくるようです。
これが仕様なのかバグなのかは分かりませんが、チェック結果自体が間違いになってしまう可能性があるので、使用の際には注意が必要です。たぶん transparent の解釈の問題なので、とにかく親要素と子要素の色がCSSの中で明示されていれば起こらないはず。たぶん。チェックの際の参考になれば幸いです。
ColorSelector（カラーセレクター）
ColorSelectorは、ディスプレイ上の色の組み合わせをスポイト選択やRGB値入力によって判定することができるツールです。
どのような方法で色差の計算しているのか明示はされていませんが、すくなくともまだWCAG 2.0や改訂後の新JIS対応はしていないようです。カラー・コントラスト・アナライザーのチェックで場合によってはNGだった白い背景 #ffffff; (R:255,G:255,B:255) とグレーの文字 #666666; (R:102,G:102,B:102) も、ストレートにOKとなります。
あとチェックしてみて疑問に思ったのが、白い背景 #ffffff; (R:255,G:255,B:255) に薄いグレーの文字 #cccccc; (R:204,G:204,B:204) を乗せた時の組み合わせで、第一色覚のチェックがOKとなっているのですよね。カラー・コントラスト・アナライザーでチェックした時とずいぶん結果が異なっているので、むむむ？ といった具合です。
うーん、本当なのかなぁ、この結果。でもOKって出てるし...でもなんとなく疑問が残る...むむむむー。
ColorDoctor（カラードクター）
ColorDoctor は、各色覚特性に応じてシミュレート表示してくれるツールです。
「透過モード」でディスプレイ上に表示された内容をシミュレートすることもできますし、「ブラウザモード」でURLを指定して確認することもできます。ブラウザモードでは動画などもリアルタイムに確認することができます。
個人的には元のデータと並べて比較できる点が便利で重宝しています。クライアントなどに提案をする際には、ただ数値を並べるよりビジュアルで見せる方が絶対的に強い材料になりますものね。
そんなこんなで、思ったこと
「ツールを使えばちゃんとチェックしてくれる！」と思うのが人情なのに、特定条件でうまく動かないことがあったり、そうした不具合（じゃなくてちゃんとした仕様だったらごめんなさい！）があることに気付きづらい仕組みだったりすると、若干残念な気持ちがします。あとやっぱり、そのツールで採用している計算方法と根拠は知りたいですね。わからないと不安ですもの。
色に限らず、アクセシビリティのチェックは機械的にやるべきだという意見も多く聞かれます。機械的に判定できる部分は確かにたくさんあるし、私も機械的にどんどんやることには賛成です。とはいえ、チェックするためのツールや仕組みがきちんとしていなければ、なんら信頼できないチェック作業にしかならないワケで。その点が現状でクリアできているのかな？ という不安がある状態で作業するとかイヤですよね...。
デザイナーやフロントエンドで実装に関わる人にとって知識や勉強はもちろん必要だと思いますが、ツールの開発者の方々にも是非ぜひ頑張ってもらって、
よりオープンで素敵なツールを作ってほしいです！
- 投稿日：2010年2月 3日 13:05
- カテゴリ：サービス、アプリ