hamashun.com

text-indentや他の方法でテキストを追いやって、代わりに画像を配置するテクニック、いわゆる画像置換やFIRと呼ばれるテクニックがあります。
これは音声ブラウザにおいても情報が読み上げられる事から、高いアクセシビリティを持つテクニックとされています。
主にナビゲーションなどで利用されていますが、最近では徐々に使われなくなってきているとか。
恐らくその理由は、CSSが有効で画像がオフの場合に、何も表示されないという点からだと思います。
まあ、そんな環境がどれだけあるのかは分かりませんけれど。

今回は、極力アクセシビリティを高めつつも、それなりにデザインを保てる方法をご紹介します。

アクセシビリティを高める、という意味では、テキストリンクにしてしまうのが一番です。
これならどんな環境でもほぼ対応できます。
しかし、デザイン的な問題が残ります。
特にメインナビゲーションなどには、やはり背景画像が欲しいものです。

となると次に考えるのは、<img>タグでHTML側に配置して、alt属性に適切な値を入れる事でしょうか。
これなら確かに、CSSをオフにしても画像をオフにしても情報を得られますが、hover状態の演出をするにはJavaScriptが必要になります。

そこで、今回はテキストリンクと画像置換の合わせ技を試してみました。
サンプル

Web Developerをお持ちの方は、画像やCSSをオフにして頂ければ、どちらの環境でも情報が失われていない事を分かって貰えると思います。
ナビゲーション部分のソースは以下です。

ul li {
 float:left;
 margin:0 5px;
}

ul li a{
 display:block;
 font-family:Verdana;
 width:185px;
 height:64px;
 line-height:64px;
 background:url(btn_1.gif) no-repeat;
 text-align:center;
}

 ul li a:link,
 ul li a:visited {
 color:#fff;
 font-size:2em;
 font-weight:bold;
 text-decoration:none;
}

ul li a:hover {
 color:#888;
}

見て貰えれば大体分かると思いますが、一応解説をば。
このテクニックのキモは、用意する画像にあります。

見ての通り、文字を入れてません。 背景だけです。
文字部分はa要素の内容をそのまま使用している訳です。
デフォルトのフォントだと見栄えが良くないので、font-familyなどで装飾します。

hover時の設定も見たまんま。 文字部分の色を変えているだけです。
もちろん、通常のFIRのようにhover時の背景画像を用意すれば、背景画像を変える事も可能です。
がんばれば、文字部分の背景にシャドウを合わせる事もできる・・・・・・と思いますｗ

ただ、このテクニックにも欠点はあります。
一つは和文フォントだと、どうしてもデザイン的に弱くなってしまう事。
もう一つは、コンテンツの背景、ボタンの背景、文字の色と、コントラストの調整が少しやっかいな事。
でもまあ、どちらもクリティカルな欠点では無いと思います。