「画像置換はアクセシブル」じゃないよ、という話

少し前に Twitter などで触れてた話だが、Web Accessibility Advent Calendar 2016 5 日目の記事として出そうと思って置いておいたネタ。すでに最近では「いにしえのテクニック」となってしまった感もあるので、いまさらこんな話どうでもいいような気がしないでもないが、画像置換とアクセシビリティの話。

そんな訳で、先日たまたま、画像テキストのCSS置換に代わる2016年版のベストプラクティスという記事を読んだ。簡単に言えば「画像置換はやめて Web フォントや SVG、もしくは普通に img 要素使おう」という内容で、それ自体にはまったく異論がないのだけど、後半に書かれている次の一文だけはどうも引っかかった。

画像置換は、控え目に言っても少数の例でアクセシビリティの観点からいまなお妥当であるといえます。これは驚くことではないでしょう。なぜならこれらの手法を使う主な理由は、Web上で美的に洗練され、しかもアクセシビリティに十分配慮したテキストコンテンツの表示を実現することだからです。

この記事は元々 SitePoint という海外のサイトに掲載されたものの翻訳だが、以前も別サイトの何かの翻訳記事に同じようなことを書いてあった記憶がある（どれだったか覚えてない）。海外ではこの考え方がスタンダードなの? まあそんな訳はないと思うけど、とにかく世の中にそう思ってる人がいるということには違いがないので、この機会に正しておきたい（ここで日本語で書いても元記事書いた人には伝わらなさそうだが、それはそれ）。

画像置換の歴史と、過去に解決されてきた問題

もう昔話すぎてうろ覚えなので「このセクションに書いてあることは間違ってるかもしれない」という前提で読んでいただきたい。多分どこか間違ってる。

最初の画像置換（俗に Fahrner Image Replacement と呼ばれるもの）は、ある要素の内容テキストをすべて span 要素などでラップして、親要素の background-image プロパティで画像を表示し、子要素は display: none で非表示にするものだった¹。

しかし、この方法はテキスト内容を非表示にするため、いくつかのスクリーンリーダーがテキストを読み上げないという指摘が入る。リンク先記事の冒頭にも「もうこの方法は使わないように」との注釈が入っている程度には問題点が認知され、今ではほぼ使われなくなっている²が、まあ画像置換というテクニックは元々、生まれた時からアクセシビリティ上の問題を抱えていた訳である。

その後、この方法の「背景画像で置き換える」というベースは継承しつつも「ブラウザには画像を表示しつつ、スクリーンリーダーなどにはテキストを提供するには」という観点から³ text-indent: -9999px やら何やら、さまざまなテクニックが考案されていく…というのが、簡単な画像置換の歴史かと思う。ここでそのすべては紹介し切れないので、CSS Tricks の The Image Replacement Museum あたりを参照。

まあ、ここまでの歴史でいちおう、スクリーンリーダーに対する問題点は解消してきたとはいえる。でも、ここで思い出さなければならないのは、ウェブアクセシビリティというのは決してスクリーンリーダーを使う人だけに配慮すれば済む問題ではないということだ。

今でも解決されてない問題点

ここまでに考案されてきた画像置換テクニックは、そのほとんどが background-image プロパティを使用したものである。そして、これは画像置換が登場した時からずっと指摘され続けてきたことではあるが、そもそもこれらのテクニックはその仕組み上、CSS が有効かつ画像が無効な環境では何も表示されないという問題を抱えたままである。

…と、こういうことを言うと必ず「いまどきブラウザの設定で画像非表示デフォルトにしているやついない」などと反論されるのだが、画像が有効でない環境というのは決してユーザが自発的に画像表示をオフにしているケースだけではない。例えば「画像配信サーバをコンテンツ用サーバとは別に分けて負荷を分散したい」というようなケースを想定して、もし画像配信サーバにだけトラブルが発生したらどうなるか? などと考えてみればいいと思う。

また、これも以前から指摘されてることだが、次のようなケースも一種の「画像が無効な環境」といえるだろう。

• ウェブページを印刷する（ほとんどのブラウザはデフォルトで背景画像を印刷しない）
• Windows のハイコントラストモードを使用する（ウェブページの背景画像は無視され、黒背景になる）

自分の知る限り、これを解決できてるのは ::before 擬似要素を使ってテキストを追い出す手法と、テキストの前に 1 ピクセルの透過 GIF ファイルを置いて代替テキストを仕込む手法くらいだ。前者は今でもまあまあ優れた方法だとは思っているが、Retina Display や Fluid Grid への対応などを考え出すと、色々と面倒で最近はいまいち使いづらい。後者はテキストブラウザで二重にテキストが表示されるというのもあるが、それ以前にこのためだけにわざわざ 1 ピクセルの画像のコードを HTML に書くくらいなら、自分なら最初から表示したい画像をマークアップする。

要するに

画像置換は最初から「そもそもアクセシブルでも何でもない」ものであって、それなのにアクセシビリティの観点からいまなお妥当とか、アクセシビリティに十分配慮したなどと言われても、正直ちょっと何言ってるか分かんないってなる。

そんな訳で、もしこれまで「ウェブアクセシビリティ的にも優れたテクニック」だと思って画像置換を使っていた制作者の方々がいるのであれば、今すぐに認識を改めていただきたいところである。

そうでなくても、Web フォントや SVG のブラウザサポート状況は、以前に比べればかなり進んでいるし、非対応ブラウザへのフォールバックや少し古いブラウザのバグを回避する方法、アクセシブルに提供する方法なども十分に考案されている。IE8 以下を無視しても特に問題がなくなった今では、もはや画像置換を使わざるを得ないような場面はほぼないはずだ。