hamashun.comhamashun.comJavaScriptが利用できない状態です。一部コンテンツが正常に動作しない可能性があります。MenuHomeWorkAboutBlogContactLinkBlog※ブログ移転しました。»アクセシビリティを更に高めるFIRtext-indentや他の方法でテキストを追いやって、代わりに画像を配置するテクニック、いわゆる画像置換やFIRと呼ばれるテクニックがあります。これは音声ブラウザにおいても情報が読み上げられる事から、高いアクセシビリティを持つテクニックとされています。ナビゲーションなどで利用されていますが、最近では徐々に使われなくなってきているとか。その理由は、CSSが有効で画像がオフの場合に、何も表示されないという点からだと思います。そんな環境がどれだけあるのかは分かりませんけれど。今回は、極力アクセシビリティを高めつつも、それなりにデザインを保てる方法をご紹介します。アクセシビリティを高める、という意味では、テキストリンクにしてしまうのが一番です。これならどんな環境でもほぼ対応できます。デザイン的な問題が残ります。メインナビゲーションなどには、やはり背景画像が欲しいものです。なると次に考えるのは、<img>タグでHTML側に配置して、alt属性に適切な値を入れる事でしょうか。これなら確かに、CSSをオフにしても画像をオフにしても情報を得られますが、hover状態の演出をするにはJavaScriptが必要になります。そこで、今回はテキストリンクと画像置換の合わせ技を試してみました。Developerをお持ちの方は、画像やCSSをオフにして頂ければ、どちらの環境でも情報が失われていない事を分かって貰えると思います。ナビゲーション部分のソースは以下です。color:#888;}見て貰えれば大体分かると思いますが、一応解説をば。このテクニックのキモは、用意する画像にあります。見ての通り、文字を入れてません。文字部分はa要素の内容をそのまま使用している訳です。デフォルトのフォントだと見栄えが良くないので、font-familyなどで装飾します。hover時の設定も見たまんま。文字部分の色を変えているだけです。通常のFIRのようにhover時の背景画像を用意すれば、背景画像を変える事も可能です。がんばれば、文字部分の背景にシャドウを合わせる事もできる・・・・・・と思いますwただ、このテクニックにも欠点はあります。一つは和文フォントだと、どうしてもデザイン的に弱くなってしまう事。一つは、コンテンツの背景、ボタンの背景、文字の色と、コントラストの調整が少しやっかいな事。どちらもクリティカルな欠点では無いと思います。Comment文字を大きくするとはみ出しますねoverflowを使うと解消されます。次のサイトが参考になると思います。