アイコンフォントのアクセシビリティ向上
ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコン (.gif、jpg、.png など) ではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。
アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、ウェブアクセシビリティの観点で考えると、実装において若干の工夫が必要です。
代替テキストを提供する
画像アイコンであれば、<img> 要素の alt 属性を使って代替テキストを記述することができるので、それによってスクリーンリーダー利用者に対して、音声でアイコンの意味を伝達することができます。これに対しアイコンフォントの場合、どうすれば代替テキストをユーザーに提供することができるでしょうか。
解決策としては、WAI-ARIA で定義されている「aria-label」を使うとよいでしょう。アイコンフォントを表わす HTML 要素の中に「aria-label= "xxx" (xxx は具体的な自然言語によるラベル)」を記述することで、スクリーンリーダーが認識して読み上げてくれるラベルを付与することができます。
Font Awesome を例にすると、虫眼鏡アイコンに対して「<i class= "fa fa-search" aria-label= "検索"></i>」と記述し、PDF アイコンに対して「<i class= "fa fa-file-pdf-o" aria-label= "PDF"></i>」と記述する...といった具合です。なお、aria-label の属性値は、日本語で記述しても大丈夫です。Windows の NVDA (Internet Explorer および Firefox と併用)、Mac OS X の VoiceOver (Safai と併用)、iOS の VoiceOver (Safari と併用)、Android の Talkback (Chrome と併用)、で試してみましたが、いずれも、アイコンにフォーカスが当たった際、同時に aria-label 属性値も読み上げられ、アイコンの意味を容易に把握することができました。
アイコンフォントに aria-label でラベルを付けるというテクニックは、WCAG 2.0 関連文書でも紹介されています。「ARIA6: Using aria-label to provide labels for objects」「ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used」をご参照ください。スクリーンリーダーが無視するようにする (装飾的なアイコンの場合)
一方、アイコンが装飾的なものである (たとえば、具体的なラベルがアイコンに隣接して表示されている) 場合は、スクリーンリーダーが無視する (音声読み上げの対象として認識しない) ようにしておきたいものです。
解決策としては、WAI-ARIA で定義されている「aria-hidden」を使うとよいでしょう。アイコンフォントを表わす HTML 要素の中に「aria-hidden= "true"」を記述することで、スクリーンリーダー利用時に、アイコンにフォーカスが当たるのを回避することができます。
Font Awesome を例にすると、右向き矢じりアイコンに対して「<a href= "...">次のページ <i class= "fa fa-angle-right" aria-hidden= "true"></i></a>」と記述する...といった具合です。
以上、ちょっとした工夫ですが、WAI-ARIA を使うことで、アイコンフォントのアクセシビリティを向上させることができます。ぜひお試しいただければと思います。