書籍「Webアクセシビリティ」
洋書の日本語訳本でしたが発行が昨年末なので、内容は古くさくはありません。
Webアクセシビリティ 標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)偶然にもここ数ヶ月、施設にて視覚障害の方のディサービスのパソコンサポートをしていたので、音声読み上げソフト（スクリーンリーダー）を意識したサイト作りが実感を持って感じられます。特に参考になった箇所を下記で紹介します。
画像のリンク（altテキスト）
例えばこのブログ上部にあるタイトルロゴ。
<a href="http://blog.3re.jp/" accesskey="1">
<img src="http://blog.3re.jp/img/blogTitle.gif" alt="サンレシステム" height="76" width="242" />
</a>
うっかりalt="タイトル"としてしまってもおかしくありません。しかしリンクになっている画像のaltテキストは、基本的にリンク先の説明にするべきです。なぜならスクリーンリーダーがこの画像を「タイトル」と読んでも、視覚障害者には全く意味のない情報だからです。
ナビゲーションリンクのスキップ
このブログは違いますが、通常のhtmlのウェブサイトの場合、上または横に長いナビゲーションリンクがあると思います。スクリーンリーダーは上部から忠実にhtmlを読んでいくので、「トップ」や「会社概要」、「お問い合わせ」などの多数のリンクの読み上げで、肝心の本文までにかなり時間がかかってしまいます。
本文へジャンプ
そこですぐに本文に飛びたい視覚障害者のために上の「本文へジャンプ」といったナビゲーションリンクを<body>タグの近くに作っておこうということです。また、あくまでスクリーンリーダー対策なので、下記の様に非表示になるようcssで隠しておきます。
<a href="#content" style="position:absolute;top:-10em;">本文へ</a>
カテゴリ：
HTMLトラックバック(0)
このブログ記事を参照しているブログ一覧: 書籍「Webアクセシビリティ」
このブログ記事に対するトラックバックURL: http://www.3re.jp/mt3re/mt-tb.cgi/20
コメントする