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