画像置換によるアクセシビリティーの低下

2007年1月31日

Fsikiさんのエントリー「text-indent: -xxxxemの弊害」で紹介されている内容ですが、現在のCSSテクニックの常套手段である画像置換をするとFirefoxではクリックした時に画面外に飛ばした範囲にまで点線が生じてしまうので、対策として

a {
outline: none;
}

上記のような対策をしてきましたが、なんとこれに致命的なアクセシビリティーの欠如があることを知りました。

というのはリンクをタブキーでたどる際にフォーカスされないという問題です。

僕は日頃あまりノートPCを使わないので、タブキーでのリンクの移動などをしないという事もありまして、まったくもって気づきませんでした。

解決策は以下の通り

a {
overflow: hidden;
}

MacIEではリンクが消失してしまうらしいのでMacIE用のハックも用意する。

a {
/*\*/
overflow: hidden;
/**/
}

今後は、携帯電話やゲーム機なども含め、普段使わないデバイスでのチェックもするという事を意識していかなければならないのかもしれませんね。(仕事量増えて大変だ…)