More than 5 years have passed since last update.

Font-Awesomeでアクセシビリティを確保しながらウェブフォントを活用する

Last updated at2016-12-06Posted at 2016-04-12

2016年4月12日にリリースされたFont Awesomeの最新バージョン4.6。アクセシビリティ的に難があると言われていたアイコンフォントの弱点を補うため、アクセシビリティを重要視したバージョンとなっているようです。
具体的には15個のアクセシビリティ関連のアイコンが追加され、ドキュメントにアクセシビリティの項目が追加。さらに、aria-hidden="true"がデフォルトになりました。

追加されたアクセシビリティ関連のアイコン

アメリカン手話通訳（american-sign-language-interpreting / asl-interpreting）
補聴器（assistive-listening-systems）
音声解説（audio-description）
視覚障害者（blind）
点字（braille）
字幕（cc）
耳が聞こえない（deaf / deafness / hard-of-hearing）
弱視（low-vision）
丸の中にクエスチョンマーク（question-circle-o）
手話（sign-language / signing）
テレタイプライタ（tty）
ユニバーサル・アクセス（universal-access）
音量調節電話（volume-control-phone）
車椅子（wheelchair）
車椅子別デザイン（wheelchair-alt）

~~※QiitaのFont-Awesomeバージョンが古いのでフォントは未表示となっています。~~
いつの間にか対応されていました！（2016/06/29追記)

アクセシビリティを確保したコーディング

Font-Awesomeのドキュメントではアクセシビリティを担保するために3つのバリエーションとそれぞれの実装方法を提供しています。

装飾のためだけのアイコン（デフォルト）

装飾のためだけにアイコンを使用する場合はaria-hidden="true"を設定し、スクリーンリーダーに対して存在しないものと認識させます。ビジュアルデザイン上でアイコンがなくても問題がない場合にはこの実装方法で問題ありません。なお、デフォルトのサンプルコードはこの形式となっています。

装飾のためのアイコン

<iclass="fa fa-fighter-jet"aria-hidden="true"></i>

ロゴとして使用される場合

<h1class="logo"><iclass="fa fa-pied-piper"aria-hidden="true"></i>  Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller</h1>

リンクの前にアイコンを使用する場合

<ahref="https://github.com/FortAwesome/Font-Awesome"><iclass="fa fa-github"aria-hidden="true"></i> View this project's code on Github</a>

意味を持つアイコン

アイコンそのものに意味をもたせて、削除するとビジュアルデザイン上でも意味をなさない場合には<span>{label}</span>を利用して、代替テキストをスクリーンリーダーに認識させます。

交通手段をアイコンで表現する場合

<dl><dt><iclass="fa fa-car"aria-hidden="true"></i><spanclass="sr-only">Time to destination by car:</span></dt><dd>4 minutes</dd><dt><iclass="fa fa-bicycle"aria-hidden="true"></i><spanclass="sr-only">Time to destination by bike:</span></dt><dd>12 minutes</dd></dl>

残り時間をアイコンで表現する場合

<iclass="fa fa-hourglass"aria-hidden="true"></i><spanclass="sr-only">60 minutes remains in your exam</span><iclass="fa fa-hourglass-half"aria-hidden="true"></i><spanclass="sr-only">30 minutes remains in your exam</span><iclass="fa fa-hourglass-end"aria-hidden="true"></i><spanclass="sr-only">0 minutes remains in your exam</span>

インタラクションが発生するアイコン

ボタンやリンクなどのようにインタラクションが発生するアイコンについては、上記の対策に加えてアイコンにtitle属性を指定することで、マウスなどの認知デバイスでも、隠しテキストを認識できるようになります。

ショッピングカートの中身を見るボタン

<ahref="path/to/shopping/cart"><iclass="fa fa-shopping-cart"title="View 3 items in your shopping cart"aria-hidden="true"></i><spanclass="sr-only">View 3 items in your shopping cart</span></a>

ナビゲーションへのリンク

<ahref="#navigation-main"><iclass="fa fa-bars"title="Skip to main navigation"aria-hidden="true"></i><spanclass="sr-only">Skip to main navigation</span></a>

削除ボタンアイコン

<aclass="btn btn-danger"href="path/to/settings"><iclass="fa fa-trash-o"title="Delete"aria-hidden="true"></i><spanclass="sr-only">Delete</span></a>

それ以外の方法

フォントアイコンのアクセシビリティについては議論があり、そもそもタグを使用せずに擬似要素を使うべきなどの意見もあります。興味がある方は以下のリンクの内容も確認してみてください。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Movatterモバイル変換