Shift2の植木さんのセッションで取り上げられていた「画像置換とアクセシビリティ」について、まとめてみます。
2008年12月に勧告されたWCAG 2.0の【1.1.1 Non-text Content】には以下のように書かれています。
1.1.1 非テキストコンテンツ（Non-text Content）:ユーザーに提示されるすべての「非テキストコンテンツ」には、以下に挙げる場合を除いて、同等の目的を果たす「代替テキスト」があること。（LevelA）
なお、文中にある以下の場合として「コントロール、入力」「時間に伴って変化するメディア」「試験」「感覚的」「CAPTCHA」「装飾、整形、非表示」が挙げられています。
LevelAに指定されているので、守るべき項目だと思います。
そして、WCAG2.0に準拠するためのテクニック集という位置づけである「Techniques for WCAG 2.0」というガイドラインの【F3】に、画像置換に関する事項が掲載されています。
CSSのbackground-imageプロパティは、HTMLを参照せずにCSSで文書（webページ）に画像を表示する方法を提供します。CSSのbackground-imageプロパティは、装飾目的で設計されたものであり、代替テキストとCSSによって表示された画像を結びつけることができません。代替テキストは、重要な情報を伝達する画像を見ることが出来ない人にとって必要です。したがって、重要な情報を伝達する画像にCSSのbackground-imageプロパティを使うことは怠慢です。
つまり、画像置換はアクセシビリティ的な観点からも「NG」であると、WCAG2.0で記載されているということになります。
なお、セッションの中では「WCAG 2.0 に適合できる"画像置換"の条件」として、以下の３点を挙げていました。
- 画像が重要な情報を伝えていない
- 画像が重要な情報を伝えている場合、その情報が支援技術にも提供されている
- CSSの画像が表示されなくても情報が入手可能
テキストと画像の伝えている情報が等価である・・・というのは当然ですが、画像置換を採用する際には、しっかり検討した上で使ったほうがいいということですね。
- 日本語訳について
- WCAG2.0 1.1.1は「WCAG 2.0 CR（勧告候補）日本語訳」を、Techniques for WCAG 2.0 F3 Descriptionについては私が翻訳、Techniques for WCAG 2.0 F3 TestsについてはShift2での植木真さんのセッション資料を参考にしました。
「WCAG 2.0 に適合できる"画像置換"の条件」としてもう一つ、OSのハイコントラストモードでも見えるかどうかです。CSSのbackground-imageプロパティで表示されている画像は、例えばハイコントラストモードで背景色を黒にすると、意味のない背景画像という扱いで、真っ黒になって何も見えなくなったりします。
＞植木さん
補足していただきまして、誠にありがとうございます。
セッション中でも触れられていた「ハイコントラストモード」について抜けてしまっていました。
OSにハイコントラストモードというものが搭載されていたことも、Shift2のセッションの中ではじめて知りました。
実際に某社のサイトも、ハイコントラストモードで重要な情報が伝わっていませんでしたもんね。
紹介されていた「DKIR」という手法はちょっと違和感を感じたので、やっぱりimg要素で指定したほうがいいのかなぁ・・・と思っています。