[アクセシビリティ] アイコフォント要素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>

関連

このページをシェアする

関連タグ

関連記事

クレジットカード情報入力フォームのベストプラクティスを考える

背景 / クレジットカード情報を入力するフォームの仕様 / 適切なマークアップをする / デモ

[アクセシビリティ] 画像に代替テキスト(alt)を追加するときの観点

概要 / img 要素の alt 属性の入れ方 / Alt 属性決定木 / 実装 / 参考リンク

[CSS] 究極のIE対策

条件付きコメント / メディアクエリを利用して IE10〜IE11 に対応する