アイコンフォントis便利
FontawesomeやIcoMoonといったアイコンフォントは、ベクターデータをフォントとして扱えるためとても便利です。
アクセシビリティ問題
しかし、アイコンフォントをそのまま使ってしまうとアクセシビリティ的にはよろしくない。
具体的にはスクリーンリーダーでサイトを読み上げながら閲覧しているユーザーにとっては、アイコンが登場する度に意味不明な情報を聞かされることになってしまいます。
もしアイコンがいくつも並ぶようなページでそのようなことになったら、ユーザーにとっては苦痛でしかないですよね。
コーディングによるソリューション
ではどうするか。例えば上記画像の「Download」ボタンのアイコンをFontawesomeを使用し実装するとき、以下のようにHTMLコードに一手間加えることで問題を解決出来ます。
<i class="fa fa-download"></i>
…このようにシンプルに書いてもきちんとアイコンが表示されますが、
<i class="fa fa-download" aria-hidden="true" role="presentation"></i>
…のようにaria属性、role属性を追記すればアクセシビリティに配慮した書き方になります。
role属性はその要素のセマンティクス・意味を再定義したり明確にするためのもの。この例では本来は他と区別したいテキストを表す意味を持つのi要素にアイコンという別の意味を持たせているためrole="presentation"でセマンティクスの再定義を行なっています。
対してaria-hidden属性はスクリーンリーダーにその要素が無視できることを教えるもので、役割が微妙に異なります。
aria属性、role属性はどちらか片方でもほぼ問題ないのですが、両方書いた方が安全というテスト結果があるようです。
セマンティクスの再定義が必要ない場合role属性は不要。例えば<nav role="navigation">などとする必要はない。なので、常にrole属性をつけるべきというわけではない点には注意ですね。
あえて読ませる場合
スクリーンリーダー・ユーザーにもアイコンが示すコンテンツを説明したい場合もあるかもしれません。
そのような時は以下のようにaria-labelを記載します。
<i class="fa fa-download" aria-label="ダウンロード" role="presentation"></i>
しかし通常のテキスト情報が記載してある時に
<span><i class="fa fa-download" aria-label="ダウンロード" role="presentation"></i>ダウンロード</span>
などと書くのは蛇足ですね。
所感
実案件でアクセシビリティが要件に入ることはそれほど多くはありませんが、いちWeb制作者としてティム・バーナーズ・リーが提唱するThis is for everyone"というWebそのものの理念に少しでも近づけられればと考えています。精進！