第19回 今すぐできるアクセシビリティ対策テーブルレイアウトを卒業しよう
今すぐできるアクセシビリティ対策
アクセシビリティとは
アクセシビリティとは、直訳すれば「近づきやすさ」になります。そこから、施設やサービスの利用しやすさ、情報へのアクセスのしやすさなどを指す言葉として使われています。とても広い意味を持っていますが、特にウェブにおいては、ウェブページの情報の得やすさ（ウェブアクセシビリティ）を指します。
- CSSの使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
ウェブページにアクセスするユーザーは千差万別です。パソコンかもしれないし、モバイルかも しれません。また、視覚などに障害があってなんらかの支援ソフトなどを使っている場合もあります。
これらの様々なケースで、平等に情報を得られるページに しようというのがウェブアクセシビリティの基本的な考え方です。情報のバリアフリー化とも言われます。
あらゆるケースに完璧に対応するのはとても困難ですが、少しでも考慮しておくと全然ちがう！というポイントも多々あります。
ということで今回はすぐにできる対策をご紹介します。
超定番、必須の属性からいきます！
alt属性
alt 属性はimg要素（など）の代替テキストとして、表示または音声で読み上げられます。ルール上は省略不可の必須属性です。特に重要なのは、視覚障害のある方への配慮です。スクリーンリーダーと呼ばれるような画面を機械音声で読み上げる支援ソフトは、このalt属性を画像の説明として読み上げます。
そのため、ページ内で意味合いを持つ画像にalt属性を指定しない、または説明として不適切な内容は避けるべきです。
<img src="xxx" alt="画像の解説" />
視覚障害者のパソコン・インターネット・携帯電話利用状況調査2007 第６節 結果―インターネットの利用状況 を見ると、インターネット利用時の課題の課題として、「代替テキストがない」「不要な代替テキストがある」という意見が多くあります。
極力わかりやすい説明を入れておくとよいでしょう。
わかりやすい見出しをつける
ページ内の各項目にはわかりやすい見出しをつけておくとよいです。
例えばこんな感じです。
<div class="nav">
<h2>グローバルナビゲーション</h2>
<ul>
<li><a href="./01.html">top</a></li>
<li><a href="./02.html">info</a></li>
<li><a href="./03.html">link</a></li>
</ul>
</div>
こうしておくことで、見出しが読み上げられるため、その項目が何であるかが明確になります。CSS適用時にデザイン的に不要である場合には、text- indent: -9999px;などの方法でブラウザの表示領域から消します。（この方法にも議論の余地はあると思いますが…。）
メインコンテンツは上部に配置する
そのページで重要な項目はHTML文書内で上位に記述しておきます。
視覚に問題がなければマウスやキーボードを使って「ざっと読み飛ばす」ことができますが、スクリーンリーダーは基本的にHTML文書を上から順番に読み上げていくため、そのページで言いたいことが早い段階で読み上げられるようにします。
これは特にアクセシビリティという観点でなくても、結論や主張がなかなか出てこない文書はわかりづらいことを考えれば妥当かなと思います。
大文字と小文字は区別する
英単語を全て大文字で表記した場合、スクリーンリーダーで意図したとおりに読まれない場合があります。たとえば、「Flash」と書けば「フラッシュ」と発音されますが、「FLASH」としてしまうと、「エフエルエーエスエイチ」と読まれてしまうかもしれません。これは略語は通常大文字でアルファベットでそのまま読むからです。たとえば、Cascading Style SheetはCSS（シーエスエス）、Chief Executive OfficerはCEO（シーイーオー）といった具合。
そこで、表記上すべて大文字で表したい場合はCSSで大文字に変更します。
<p>Flash</p>
p {
text-transform: uppercase;
}
パンくずリストを用意する
ページ数、階層が多いサイトの場合、パンくずリストがあるとユーザーがサイト内で迷わないようにすることができます。
作り方は以前の記事をご覧下さい。
完璧なアクセシビリティを実現するのは非常に困難ですが、ちょっとした一工夫で大きく改善できるテクニックはたくさんあります。
また、特殊な手法を使うのではなく、HTMLとCSSを正しく記述するだけでも効果は十分にはるはずです。また機会をみて色々ご紹介したいと思います。
では次回もお楽しみに。 （こう
）
お問い合わせ
メルマガ