WebInspector を使ってみる

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

WebInspectorColorSelector は、富士通株式会社が開発・配布しているアクセシビリティ(JIS X 8341-3や富士通ウェブ・アクセシビリティ指針)を診断するソフトウエアです。
普段、Mac OS X を使っていますので、上記の OS X 対応無料ソフトを使っています。
WebInspector は診断ツールですが、Windows 用には “WebInspector Pro” という診断・修正ツールがありますので、Windows ユーザーにはこちらの方が便利かも知れません。(Mac 用も作って欲しいなぁ…)
また、ColorDoctor という色のアクセシビリティをチェックするツールもあります。

で、当サイトをチェックすると結果は、ボロボロです。
とほほ…..
問題点のほとんどが文字サイズの固定と行間を固定していることを指摘しています。
それとスタイルシートの overflow に hidden を指定していることや、背景色と文字色のコントラストが甘いという指摘も多いです。
というか上記の3点が問題点のほとんどです。

今のままのデザイン・レイアウトでは文字サイズの固定と行間の固定、色のコントラストの変更はそれほど問題なくできると思います。
でも、ナビゲーション・メニューは文字サイズを変えることを意識していませんので、文字サイズの変化で他のレイアウトに影響を受けてしまうので、簡単にというわけにはいかないですね。
問題は overflow : hidden に関してですよね。
スタイルシートでテキストを画像に置き換えている箇所に overflow : hidden を使用していますので、すぐに修正・変更できない。
まぁ、overflow : hidden を指定しなくてもよい箇所もあるのですけどね。
基本的なところから変更していかないと…..

まぁ、スタイルシートもどんどん内容を追加してごちゃごちゃしてきていますので、時間があるときにすっきりと整理したいと思っているので、そのうちにこそっと修正するかも :D

しかし、”JIS X 8341-3″ を制定・販売している日本規格協会や日本工業標準調査会(JISC)のサイトを WebInspector でチェックすると、問題点が多いのが気になります。
特に半角カナを使用しているって…..

それと以前も同じようなことを書きましたが、JIS X8341-3 2004や WCAG を元にガイドラインを制定して、 それに基づいたユニバーサルデザイン Web を制作している Web 制作会社をチェックすると最悪。
どこの制作会社かは伏せますけど、Another HTML-lint gateway でもダメですね。

Another HTML-lint gateway

まっ、他のサイトをあれこれ批判するよりも自分のサイトをちゃんとすることが先決ですね。

  • このエントリーをはてなブックマークに追加

フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。