書籍「Webアクセシビリティ」

洋書の日本語訳本でしたが発行が昨年末なので、内容は古くさくはありません。

Amazon.co.jp「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>

カテゴリ:

| | コメント(0) | トラックバック(0)

トラックバック(0)

このブログ記事を参照しているブログ一覧: 書籍「Webアクセシビリティ」

このブログ記事に対するトラックバックURL: http://www.3re.jp/mt3re/mt-tb.cgi/20

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、サンレシステムが2008年2月15日 21:03に書いたブログ記事です。

ひとつ前のブログ記事は「Firefox開発環境(おすすめアドオンなど)」です。

次のブログ記事は「さくらインターネットの問題点」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.22-ja