[アクセシビリティ] アイコンフォントの要素にaria-labelなどを追加するときの観点

アイコンフォントの前提

以下は、Font Awesomeの定義例。

.fab {
  font-family: "Font Awesome 5 Brands";
}

.fa-twitter::before {
  content: "\f099";
}

<span class="fab fa-twitter"></span>

アイコンフォントのグリフに応じた文字を疑似要素に入れてアイコンを描画させている。

<img>のalt属性のように代替テキストをaria-labelを利用して記述し、適切な意味をスクリーンリーダーへ伝えることができる。

スクリーンリーダーに読ませる必要がないような装飾的なアイコンの場合は aria-hidden="true"を付与する。

<span class="fab fa-twitter" aria-hidden="true"></span>

スクリーンリーダーにアイコンの説明をする必要がある場合は、aria-labelを付与する。

<span class="fab fa-twitter" aria-label="Twitter"></span>

アイコンの側に意味のあるテキストが存在する場合、aria-labelがあるとスクリーンリーダーで二重に読み上げられてしまう。そういう場合は下記のようにaria-hidden="true"を付与する。

<a href="https://twitter.com/">
  <span class="fab fa-twitter" aria-hidden="true"></span>
  Twitter
</a>