昨年末から取り組んできた会社のサイトの「アクセシビリティ」であるが、やっていることが正しいのか“ブロ”に診断してもらうことにした。

先日、その診断報告を受けたのだが、出るわ出るわ思った以上にダメ出しを食らった。

所詮“ツール”のチェックを突破したくらいでは、とても「アクセシビリティ」が完璧になるわけがなく、人が手間を掛けてチェックすればするほどモレが見つかるわけです。

指摘されたところは順次修正するとして…

「リンク文字の下線」をどうするのかが問題。

昔、CSSが流行った時に「デザイン面でいろんなことができる」という誤った認識のまま適当に使ってきたが、その中のひとつが「リンク文字の下線を消す」である。リンク文字の下線を消すことで見た目が格好良くなったりするので、結構な頻度で使われていたりする。しかし、「アクセシビリティ」の“プロ”が言うには「それは良くない」とのこと。デザインでいくら工夫しようともそれはあくまでも「分かってくれるだろう」という単なる思い込みで、実際には「誰でも分かるようにはなっていない」とのこと。

単純に何もしなくて「リンク文字の下線」を表示させると、「リンクが多いページ」の場合は非常に見づらいページになってしまう。これは下線が文字に近すぎることと線が目立ちすぎることが原因だろう。

そこでこの「近すぎる」と「目立ちすぎる」をCSSでなんとかしてやれば、「リンク文字の下線」があってもデザイン的にはうるさくないページになるかもしれない。

さっそく、会社のサイトの一部のコンテンツに適用してみたが、今まで無かったところに線が表示されると違和感がある。やはりデザインそのものを変える必要がありそう。

もともと「リンク文字の下線」があるところをCSSで少し変えてみると結構見やすくなるため、「アクセシビリティ」としては向上するかも。

ついでに「混沌戯言」も変えてみた。
適用したスタイルシートは以下のとおり。

a {text-decoration:none; padding-top:1px; padding-bottom:1px;}
a:link {color:blue; background-color:inherit; border-top:none; border-bottom:1px solid #99C;}
a:active {color:#191970; background-color:inherit; border-top:none; border-bottom:1px dashed #191970;}
a:visited {color:#191970; background-color:inherit; border-top:none; border-bottom:1px dashed #191970;}
a:hover {color:red; background-color:inherit; border-top:1px solid red; border-bottom:1px solid red;}

ツイート