@Style

WCAG 2.0のためのCSSテクニック

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。（3.04は未確認）

そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。

先日のエントリー【MovableTypeの小技（微技）】において、以下のようなご指摘をいただきました。

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか？

ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。

アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia（インフォアクシア）』 でもナビゲーション読み飛ばしリンクとして使用されています。

<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>

このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。

勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。

アクセシビリティを考えてみると、全てはここに行き着く。

Web Content Accessibility Guidelines 2.0

全般的な目標は、現在そして将来にわたって、想定しうる最も広範囲な利用者にとって認知、操作および理解可能であり、なおかつ利用者が使用している様々な支援技術と互換性のあるWebコンテンツを制作することである。基本的原則は以下の通りです。

• コンテンツは認知可能であること
• コンテンツのインターフェイス要素は操作可能であること
• コンテンツの内容およびコントロールは理解可能であること
• コンテンツは現在および将来のテクノロジーで利用できるよう十分に互換性が確保されていること

「あなたのためとわたしのため」主語の使いかたに見る日本人のアクセシビリティ理解度 | ミツエーリンクス

大切なのは、「あなた」も「わたし」も含め、「誰にとっても」使いやすくすることを考えることなのです。冒頭のように、「あなたたちにとって」という考えかたがある限り、JIS準拠だのアクセシビリティ配慮だの言ったところで、健常者と障害者の距離はなかなか縮まらないでしょう。アクセシビリティは、バリアフリーとも言いますが、バリアを取り除くこと、つまり排他的な第三者の視点ではなく、同じ視点で捉えようとする努力が必要になります。日本でのアクセシビリティに対する取り組みを、表面的なもので終わらせないためにも、たまには意識して主語を考えてみるのもいいかもしれません。

【利用者の気持ちでだれもが使いやすいサイトを】 YOMIURI ON LINE インタビュー記事（2月8日掲載）

高齢者や障害者の方が使いやすいものは、だれにとっても使いやすいはずで、結局は皆が恩恵を受けられると思います。電話のプッシュホンだって、元々はダイヤルを回しづらい人のために考えられたのが、今や当たり前になっています。エスカレーターやエレベーターの設置も同じで、障害がない人でも、重い荷物を持って階段を上り下りするのが大変なときに、あってよかった、と思うでしょう。

最近、長時間ディスプレーを見ていると目が疲れる・・・

Webサイト制作コンセプト [アットスタイル]

長らくWeb業界は、ブラウザできれいに表示できればそれでよい、という誤った認識に縛られてきた事実があります。ただ表示するためのみを目指した “正しくない”手法に基づいたソースコードが氾濫した結果、高齢者や障害者など社会的に弱い立場にあるユーザーに対して不自由を強いるなど、弊害が生じていました。しかし、見ばえを偏重するWebデザインの時代は、もはや過去のものです。

この様に制作コンセプトに記しているので、リキッドデザインに変更して文字の大きさを変えたついでに、このブログとWebサイトもaDesignerで検証してみました。

ページの先頭に読み飛ばしリンク、さらにナビゲーションバーにも読み飛ばしリンクを設置。GUIでの見た目はそのままで、非常に良いと結果が出ました。

ただひとつ気になるのが、スタイルシートのdisplay:noneの記述。
検索エンジンスパムとならなければ良いのですが。

アクセスビリティの高い Web ページの提案
＊現在、該当ページは公開されていません。

私の個人的なBlogが参考URLとして紹介されていました。私のところはあまり参考にならないのですが、この文書はWebサイトのアクセスビリティについて非常にわかりやすく解説してありますので、ぜひお読みになることをお勧めいたします。