アイコンフォントのアクセシビリティ向上 | Accessible & Usable

公開日 : 2014年8月28日 (2018年1月20日 更新) カテゴリー : アクセシビリティ ウェブデザインにおいて、アイコンを配置することは多いと思います。最近では、画像アイコン (.gif、jpg、.png など) ではなく、Font Awesome のようなアイコンフォントを用いるケースも増えてきました。 「アイコンフォント」の例 (Font Awesome) アイコンフォントには、画像アイコンよりも読み込みが速い、ベクターデータゆえに高解像度の画面でもきれいに表示できる (ピンチ＆ズームしてもジャギーにならない)、手軽に実装できる (わざわざアイコンを作る必要がなく、豊富なアイコンから選択して所定のコードを埋め込むだけ)、といったメリットがあります。このように、とても便利なアイコンフォントですが、ウェブアクセシビリティの観点で考えると、実装において若干の工夫が必要です。 代替

[ku_marin]

aria-labelつけてあげるの忘れない

[asari3]

Font Awesome も ARIA も初めて知った

[blend27]

フォント読み込まれなかったときにテキスト出ない問題は解決されていないので注意