« 実は広末も入ってる!? 街角のあの”赤いバッグ”の新CM | メイン | デザインを変えました »

 2003年08月15日

スピーチリーダソフトへの対応

Pharkというblogサイトで説明されていた技について日本語で説明します。

グラフィックスを利用したページをリーダーソフト(いわゆるページ読み上げソフトですね)に読ませた場合、絵が入ってくると文章がなんかよくわかんなくなっちゃって目の不自由な人には親切じゃないページ、と烙印を押されてしまうことがよくあります。

じゃあ、テキストだけでいいじゃん、といえば、テキストだけだとやっぱし味気ないですし華がなくなってしまうこともありますし、なにより写真を掲載することなどできなくなってしまいます。

そこでCSSを利用して絵を使いながらリーダソフトで読んだときも問題ないページにするためのテクニックです。

まず、例として以下のロゴをページの冒頭に利用することにしましょう。
modashin_logo.gif

これをリーダソフトに読ませるとaltの部分であるmodashin_logo.gifを「エム・オー・ディー・・・」と呼んじゃうので何がなんだかわからなくなるので、リーダソフトには

「モダーンシンタックスのホームページへようこそ。」と読ませることにします。
で、テクニックです。まず、

<div id="replaceText"><h1>モダーンシンタックスのホームページへようこそ
<h1></div>

としておきます。で、スタイルシートでreplaceTextをつぎのように定義します。

#replaceText {
text-indent: -100em;
overflow: hidden;
background: url(modashin_logo.gif) no-repeat;
}

するとロゴでテキストが隠されて次のように表示されます。



モダーンシンタックスのホームページへようこそ




で、スタイルシートを解除するとどのように見えるかというと、

CSS解除

となるわけです。ページ制作にも余裕がでてきたら目の不自由な方にも配慮したページつくりを心がけたいですね。


 投稿者 nagasawa : 2003年08月15日 16:49

 トラックバック

このエントリーのトラックバックURL:
http://www.aivy.co.jp/cgi-bin/naga/MT3/mt-tb.cgi/8

 コメント

 コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)