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"を設定し、スクリーンリーダーに対して存在しないものと認識させます。ビジュアルデザイン上でアイコンがなくても問題がない場合にはこの実装方法で問題ありません。なお、デフォルトのサンプルコードはこの形式となっています。
<i class="fa fa-fighter-jet" aria-hidden="true"></i>
<h1 class="logo">
<i class="fa fa-pied-piper" aria-hidden="true"></i>
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h1>
<a href="https://github.com/FortAwesome/Font-Awesome"><i class="fa fa-github" aria-hidden="true"></i> View this project's code on Github</a>
意味を持つアイコン
アイコンそのものに意味をもたせて、削除するとビジュアルデザイン上でも意味をなさない場合には<span class="sr-only">{label}</span>を利用して、代替テキストをスクリーンリーダーに認識させます。
<dl>
<dt>
<i class="fa fa-car" aria-hidden="true"></i>
<span class="sr-only">Time to destination by car:</span>
</dt>
<dd>4 minutes</dd>
<dt>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<span class="sr-only">Time to destination by bike:</span>
</dt>
<dd>12 minutes</dd>
</dl>
<i class="fa fa-hourglass" aria-hidden="true"></i>
<span class="sr-only">60 minutes remains in your exam</span>
<i class="fa fa-hourglass-half" aria-hidden="true"></i>
<span class="sr-only">30 minutes remains in your exam</span>
<i class="fa fa-hourglass-end" aria-hidden="true"></i>
<span class="sr-only">0 minutes remains in your exam</span>
インタラクションが発生するアイコン
ボタンやリンクなどのようにインタラクションが発生するアイコンについては、上記の対策に加えてアイコンにtitle属性を指定することで、マウスなどの認知デバイスでも、隠しテキストを認識できるようになります。
<a href="path/to/shopping/cart">
<i class="fa fa-shopping-cart" title="View 3 items in your shopping cart" aria-hidden="true"></i>
<span class="sr-only">View 3 items in your shopping cart</span>
</a>
<a href="#navigation-main">
<i class="fa fa-bars" title="Skip to main navigation" aria-hidden="true"></i>
<span class="sr-only">Skip to main navigation</span>
</a>
<a class="btn btn-danger" href="path/to/settings">
<i class="fa fa-trash-o" title="Delete" aria-hidden="true"></i>
<span class="sr-only">Delete</span>
</a>
それ以外の方法
フォントアイコンのアクセシビリティについては議論があり、そもそもタグを使用せずに擬似要素を使うべきなどの意見もあります。興味がある方は以下のリンクの内容も確認してみてください。
- Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA
- HTML for Icon Font Usage | CSS-Tricks
- The Great Icon Debate: Fonts Vs SVG