アイコンフォントis便利

FontawesomeやIcoMoonといったアイコンフォントは、ベクターデータをフォントとして扱えるためとても便利です。

3130a599-9087-2f93-a0f2-32e6fde8c4a8

アクセシビリティ問題

しかし、アイコンフォントをそのまま使ってしまうとアクセシビリティ的にはよろしくない。
具体的にはスクリーンリーダーでサイトを読み上げながら閲覧しているユーザーにとっては、アイコンが登場する度に意味不明な情報を聞かされることになってしまいます。
もしアイコンがいくつも並ぶようなページでそのようなことになったら、ユーザーにとっては苦痛でしかないですよね。

コーディングによるソリューション

ではどうするか。例えば上記画像の「Download」ボタンのアイコンをFontawesomeを使用し実装するとき、以下のようにHTMLコードに一手間加えることで問題を解決出来ます。

index.html

…このようにシンプルに書いてもきちんとアイコンが表示されますが、

index.html

…のようにaria属性、role属性を追記すればアクセシビリティに配慮した書き方になります。
aria属性、role属性はどちらか片方でもほぼ問題ないのですが、両方書いた方が安全というテスト結果があるようです。

あえて読ませる場合　

スクリーンリーダー・ユーザーにもアイコンが示すコンテンツを説明したい場合もあるかもしれません。
そのような時は以下のようにaria-labelを記載します。

index.html

しかし通常のテキスト情報が記載してある時に

index.html

ダウンロード

などと書くのは蛇足ですね。

所感

0-1

実案件でアクセシビリティが要件に入ることはそれほど多くはありませんが、いちWeb制作者としてティム・バーナーズ・リーが提唱するThis is for everyone”というWebそのものの理念に少しでも近づけられればと考えています。精進！

元記事はこちら

「アクセシビリティに配慮してアイコンフォントを使う」