零弐壱蜂

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

2 min read

アイコンフォントの前提

以下は、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>

関連

Edit on GitHub