かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。
以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。
Rathiの記事にヒントを得て、次の課題を挙げてみました。
- 画像変換テクニックはかつてとても人気があった。テキストを背景画像に置きかえるこの手法は、今日Web開発者の間でしばしばひどく批判されている。その理由は記事の後半で取り上げるが、批判が当たっているなら、代わりに使えるツールやベストプラクティスはどのようなものがあるのか？
- 画像置換テクニックはWebデザインにおける単なる過去の遺物だろうか、それとも、いまでもWebに悪影響を与えず、有効に使えるテクニックなのか？
はじめに、「ベストなツール」について取り上げます。
「ベストなツール」はWebフォントとCSS
コンテンツがテキストであるならテキストを使うべきで、画像化されたテキストの使用は勧められません。
いろいろなツールを自由に使える今日、テキストコンテンツを美しく表示する目的で画像が必要になることはほとんどないでしょう。
簡単に入手できるとても多くのカスタムWebフォントや、CSSの@font-faceプロパティに対するブラウザーの良好な対応状況、Typekit、Google FontsといったWebフォントサービスなどはすべて、Webでブランド力を発信し、感動を伝え、魅力的なタイポグラフィでインパクトを与えるために強力なパワーを提供してくれます。
モダンCSSではテキストの透明度レベル、影効果、ブレンドモード、アニメーションさえ簡単にコントロールできるので、PhotoshopやJavaScriptで技巧を凝らす必要はありません。
以下はWebフォントとCSSで実現できることのほんの1例です。
Smart DesignsのWebサイト。画像をまったく使わず、WebフォントとCSSだけで見事なタイポグラフィを実現しています
「画像化されたテキスト」ではなく「テキスト」を使う主なメリットは次のとおりです。
- ユーザーが必要に応じてテキストのサイズや色を簡単に変更
- テキストならばスクリーンリーダーによるアクセスや、検索エンジンボットによるクロールやインデックスが可能
- 意味的に正しい手法であり、Webコンテンツ・アクセシビリティ・ガイドライン（WCAG）の成功基準を満たす点でW3C勧告で妥当とされている関心の分離（separation of concerns）を重視したものとなる
- カスタムフォントを使っている場合、CSS font stackで代替のWebセーフフォントが簡単に入手できる
しかし、多くの人が気づいているように、どのような状況でもこの手法が通用するわけではありません。そして、以下の点を考えます。
WebフォントとCSSでは十分ではない場合
望みどおりの結果を出し、グラフィックスを納得のいくようにチューニングするのに、WebフォントとCSSではとても十分とは言えない状況があります。Webサイトのロゴはその代表例です。
ロゴはブランドに不可欠で、ロゴの形がわずかでも変わるとブランドの独自性が傷ついてしまいます。WebフォントやCSSを使っても、ロゴを正確に再現できない場合があります。おそらくロゴの字体はWeb上でそう簡単に利用できず、グラフィカルなアートワークをCSSだけで忠実に再現するのは不可能でしょう。グラフィカル要素を使えばうまくいきそうです。とはいえ、グラフィカル要素をWebサイトに表示してユーザーに見せたい一方で、スクリーンリーダーやボットにもロゴが表すブランド名にアクセスしてほしいところです。
さらにテキストのサポートなしでアイコンを使うことについても考えてみてください。現実問題として、スクリーンリーダーや検索エンジンのクローラーがアイコンの意味を把握するのは大変です。アイコンはテキストではなく、むしろテキストを間接的に表現するものだからです。たとえば、いまやおなじみの「ハンバーガーアイコン」は「メニュー」という言葉を表現しますが、「メニュー」という言葉そのものではありません。ですからテキストのサポートなしでWeb上にアイコンだけを表示すると、アクセシビリティに深刻な問題が生じるおそれがあります。
上の両方のケースでは、スクリーンリーダーや検索エンジンのクローラーが画像のテキストコンテンツに支障なくアクセスできるように、いくらかの情報を伝えることが解決策となります。かつてどうにか実現していたのが画像変換テクニックでしたが、いつからか一般的に使われなくなってしまったので、今日広く作業に使えるより良いものがあるかどうか、調べてみる価値はあります。
いくつかの選択肢を紹介します。
インラインSVG
WebフォントやCSSのパワーを活用できない状況でWebページにロゴを埋め込む優れた方法に、インラインSVGがあります。SVGとはScalable Vector Graphicsの略称で、XMLベースのグラフィクスフォーマットです。ロゴのSVGグラフィクスを作成してコードをHTMLドキュメントの中に直接そのままの形で反映できる点に注目できます。SVGをIllustratorやInkscapeなどのエディターからエクスポートする場合、さらに一歩進んでマークアップの重複を削除し出力を最適化できます。
SitePointのWebサイトのロゴを調べると、このテクニックの実例を確認できます。
SitePointのWebサイトのロゴ作成にはインラインSVGが使われている
それだけではありません。Webページに鮮明なアイコンを表示する目的でインラインSVGを使うと、驚きの性能が発揮されます。ぜひ詳しく知りたいと思う人はCSS-Tricksの『Everything You Need To Know About SVG』を参考にしてください。インラインSVGアイコンについてのビデオチュートリアルもあります。
インラインSVGの使用メリットの理由です。
- SVGコードはマークアップであり、title要素とdesc要素で意味のあるコンテクストを追加すると、検索エンジンにも支援技術にもアクセスしてもらえる。SitePointのLéonie Watsonの記事とCSS-TricksのHeather Migliorisiの記事にあるヒントを参考にして、インラインSVGグラフィックスのアクセシビリティを向上させられる
- SVGグラフィックスはその名のとおり「スケーラブル」で、しかも解像度と無関係なため、ユーザーがどれほど拡大してもすばらしい見栄えになる
- CSSとJavaScriptでインラインSVGグラフィックスの見栄えと反応をよくチューニングできる。たとえばアートワークの一部をアニメーション化したり、シェイプを動的にモーフィングしたりできる。SVGアニメーション技術について、詳しくはJordan Wadeの『Animating with Inline SVG』を参考にできる
- アイコンフォントとは対照的に、SVGコードはHTMLドキュメントにすでに埋め込まれているので、WebサイトでインラインSVGアイコンのロードが失敗することはない
さらなるメリットの1つとして、インラインSVGはブラウザーの対応状況がとても良く、対応していないのはIE8のみです。
アイコンフォント
ロゴの表示に向かないとはいえ、アイコンフォントはWebサイトにアイコンを表示する優れた方法として人気を博してきました。GlyphiconsやFont Awesomeといったオンラインアイコンライブラリーのおかげで使いやすくなったことが大きく影響して、Web上にアイコンフォントが広く見られるようになりました。
アイコンフォントはまさにテキストなので、見栄えをCSSでコントロールでき、ユーザーは好みに合わせてリサイズできます。
付属のテキストなしでアイコンに意味を持たせるために、WAI-ARIAテクニックを使ってアクセシビリティ情報を追加できます。
たとえば、Font Awesomeを使って、非表示になっているメニューを開くためのリンク付きハンバーガーアイコンを表示するとします。アイコン用のマークアップを次のように追加するだけではメニューが完全に非表示になり、スクリーンリーダーの意味が伝わらなくなってしまいます。
<a href="#" class="fa fa-bars"></a>
リンクにtitle属性を追加するとスクリーンリーダーに対して有効になりますが、場合によっては、支援技術なしでWebサイトをナビゲートしているユーザーに対して、望ましくないツールチップが表示されてしまうというデメリットもあります。
次のようにaria-label属性を使えば、スクリーンリーダーがハンバーガーアイコンフォントにアクセスでき、望ましくないツールチップも表示されません。
<a href="#" class="fa fa-bars" aria-label="Menu"></a>
とはいえAlex WalkerやSeren Daviesの指摘のとおり、Webでのアイコンフォントの実装にはいくつもの落とし穴があることをしっかり認識しておく必要があります。
アイコンフォントの使用に伴うアクセシビリティ問題に取り組むために必要なことについて詳しく知りたいなら、Filament GroupのサイトでZach Leathermanの『Bulletproof Accessible Icon Fonts』を参照してください。とても参考になります。
<img>タグ
適切なalt属性を持つ<img>タグを使ってロゴを画像表示する手法は、無難で広く使われています。
alt属性にはテキストが含まれているのでアクセシビリティ問題に対処でき、<img>要素はドキュメントの表示にテキストの魅力的でグラフィカルな表現を加えます。
W3CのWeb Accessibility TutorialsとGoogle Webmastersはどちらもこの方法を推奨しています。
考えなくてはいけない、小さなデメリットはあります。
- httpリクエストが再送されるとWebサイトのロード時間に影響する場合がある。近い将来HTTP/2が完全に実装されるとこの問題は軽減される
- 関心の分離が考慮されていない。テキストの見栄えを変更する場合、CSSではなくマークアップを変更しなければならない
- ラスター画像はユーザーが拡大すると粗くなる場合があるが、SVGグラフィックスはない
上の点も動機付けの1つになって、かつてはいろいろな画像置換テクニックがとても広く使われていました。
しかし、今日なぜこうしたテクニックが避けられているのでしょうか。その役割は本当に終わってしまったのでしょうか。
画像置換が推奨されないケース
オンラインで見つかる画像置換テクニックについての研究資料の大半は、2000年代前半か半ばのものです。2013年11月、あらゆる種類のCSS画像置換テクニックがHTML5 Boilerplateから削除されました。
画像置換が不使用の一途をたどっていることを示す重要な手がかりです。
数年前まで画像編集ソフトウェア上でしかできなかったことを、CSSでいろいろこなせるようになりました。その上Webフォントやベクターグラフィックスも手軽に使えるというのに、画像置換のような「気の利いたハック」に手を出す理由があるのでしょうか？
画像置換テクニックを推奨しない別の重要な考え方には、検索エンジンランキングに対する潜在的な悪影響が関係しています。
GoogleにはWebページ上でテキストを隠すことに反対する明確なガイドラインがあり、これを無視すると厳しく罰せられかねません。現在、GoogleのWebサイトが「Web上で疑わしい手法でテキストを隠している」とみなす事例は以下のとおりです。
- 白の背景色に対して白のテキストを使う
- テキストが画像の背後に配置される
- CSSを使ってテキストが画面の外に置かれる
- フォントサイズが0に設定されている
上に挙げた項目は一般的な画像置換テクニックの大半に折り込まれているので、だれもが画像置換テクニックの使用を警戒するようになります。
とはいえ、状況がひとまとめに扱われているわけではありません。グーグルは非表示のテキストについて「Googleの検索エンジンを操作する目的であれば、偽装行為とみなされ、Google’s Webmaster Guidelines（グーグルのWebマスター向けガイドライン）に対する違反となる場合があります（強調は筆者による）」と指摘しています。グーグルは続けて次のように述べています。
「非表示のテキストがすべて偽装行為とみなされるわけではありません。たとえばJavaScript、画像、Flashファイルなど、検索エンジンによるアクセスが困難な技術がサイトに含まれている場合、これらのアイテム用に説明テキストを使用することでサイトのアクセシビリティを改善できます」
キーワードスタッフィングや悪意が存在しないかぎり、画像置換はグーグルのガイドラインに従っているとみなせます。悪意がないことをGoogleボットに伝えるのは簡単ではありませんが、SEOのエキスパートの優れた提案によると、Webサイト上では必ず、非表示にするテキストを表示されているテキストと完全に一致させておくことが勧められています。
それだけではありません。YoastのJoost de ValkはSEO分野の確かな権威者ですが、特にWebサイトでスプライトを使う際のアクセシブルな方法として画像置換を支持しています。
Joost de Valkは記事「CSS Image Replacement, what’s up Matt?」の中で、グーグルのソフトウェアエンジニアMatt Cuttsが最近画像置換の使用に反対の立場を取っていることに対して異議を唱えています。「Joost de Valkの記事は2009年のもので、Webデザインの世界ではもう古い」と言う人がいるかもしれません。私の知るかぎり、いまのところJoost de Valkはこの件について考えを変えたと取れるようなことをなにも書いておらず、この記事を執筆した時点で、YoastのWebサイトのロゴは依然として画像置換を使って表示されています。
画像置換は、控え目に言っても少数の例でアクセシビリティの観点からいまなお妥当であるといえます。これは驚くことではないでしょう。なぜならこれらの手法を使う主な理由は、Web上で美的に洗練され、しかもアクセシビリティに十分配慮したテキストコンテンツの表示を実現することだからです。
W3C Working Group noteでは、実装が期待どおりに動かない場合に、ユーザーが同じコンテンツのテキストオンリーの代替表示に簡単に切り替えられるという条件で、画像置換テクニックが明示的に推奨されています。
ソフトウェア開発者のLogan Frankenは画像置換テクニックの限られた用途として、今日でも妥当とされるケースを挙げ、imgタグを使ったSVGや付属テキストなしのアイコンフォントをWebサイトに表示する際に、依然としてこうしたテクニックを役立てられると論じています。
最後に、画像置換は今日の最新鋭のSVGテクノロジーにおけるアクセシビリティ改善になお関係しています。Heather Migliorisiは『Accessible SVGs』の「Example 5: Linked Icon, with dynamic text（例5：動的テキストを併用したリンク付きアイコン）」と題するセクション中で、aria-label属性の使用について、インラインSVGに付随するリンクテキストが静的な場合には適切であるものの、リンクテキストがページに動的に追加されるため前もって把握できない状況には向かない、と指摘しています。Migliorisiは画像置換を使ってピンチをどれほどうまく乗り切れる場合があるかを説明しています。
最後に
この記事では、かつてかなりの人気を博した画像置換テクニックに対する代替手段として、いま利用できるツールとベストプラクティスを紹介しました。以前利用が難しかったりブラウザーの対応状況が良くなかったカスタムフォント・CSS3・インラインSVGだけでなく、適切なalt属性を持つ「古き良き」<img>タグも含まれます。
今日画像置換はほとんど「ハック的」とみなされ、非表示のテキストに対するグーグルの立場からは使用が推奨されていません。しかし例外的な状況として、たいていはアクセシビリティへの配慮に関連して、画像置換テクニックがいまなお限られた用途に使われる場合もありますが、こうした状況が長く続かないことを望みます。
（原文：It’s Time to Be Honest about Image Replacement Techniques）
［翻訳：新岡祐佳子／編集：Livit］
