アイコンフォントのウェブアクセシビリティを向上する

Webサイトで多く利用されている Font Awesome アイコン。簡単に装飾も出来て便利ですね。
しかし、それがWeb閲覧の妨げになってはいないでしょうか?

視覚障害者がWebを閲覧する際は、主にスクリーンリーダーという画面読み上げソフトを利用します。
スクリーンリーダーは、意味を持たせていないアイコンフォントをそのまま意味の無い文字列として認識します。
特に見出しにアイコンフォントを使っている場合は、スクリーンリーダーで目的の文章を見付け出す妨げになります。

aria-hidden="true" でアイコンフォントを読み飛ばす

デザイン上の理由が強いアイコンフォントは、それ自体に意味を持たせて読ませる必要が無い為、aria-hidden="true"を使ってスクリーンリーダーでは読み飛ばす様にします。
例えば Font Awesome のホームアイコンなら


<i class="fas fa-home" aria-hidden="true"></i>

コードに aria-hidden="true" を挿入します。これで見出しにアイコンフォントを使っている場合でも正しく読み上げられます。

aria-label でラベル付けする

アイコン自体に意味を持たせたい場合は aria-label でラベル付けをします。
ラベルを付けていないと視覚的には理解出来ても、スクリーンリーダーユーザーにはそれが何のリンクなのかが理解出来ません。
例えば Font Awesome ホームアイコンをそのままホームページへのリンクボタンとして使いたい場合


<a href="https://example.com" aria-label="ホームへ"><i class="fas fa-home"></i></a>

これでホームアイコンにスクリーンリーダーのフォーカスが当たると「ホームへ」と読み上げます。

スクリーンリーダー用テキストを使う

リンク要素やボタン要素を持たないアイコンでは aria-label が上手く動作しません。
そういった要素で補足説明を加えたい場合は aria-hidden="true" と共にスクリーンリーダー用のテキストを追加する方法が有ります。

Bootstrap ベースでWebサイトを構築しているなら CSS の sr-only のクラスが利用出来ます。
Bootstrap を利用していなくても CSS の中身は


.sr-only{
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 -webkit-clip-path: inset(50%);
 clip-path: inset(50%);
 border: 0
}

となっているので、これを CSS に書き加えれば利用する事が出来ます。

例えばチェックマークを Font Awesome アイコンで表現したい場合


<i class="fas fa-check" aria-hidden="true"></i><span class="sr-only">チェック</span>

一度アイコンフォントを aria-hidden="true" で読み飛ばし、視覚的には見えないテキストをスクリーンリーダーに認識させます。
スクリーンリーダーは span 要素の「チェック」を読み上げるので、一覧表を作る時等に有効です。
スクリーンリーダーは様々な OS で標準実装されていますし、動作確認も簡単に出来る様になってきました。
視覚障害者やスクリーンリーダーユーザーを意識したバリアフリーサイトが増える事を願っています。