アイコンフォントの​代替テキスト

公開

更新

AboutページのSNSリンクにFont Awesomeを使ってアイコンを付けてみたのですが、その際に各サービスのガイドラインをざっと見てみたところ、Twitterのロゴの利用規則に、鳥の隣にTwitterの文字を置いちゃだめとありまして

Don't put the "Twitter" word next to the bird. The bird is all that's required.

Twitterのブランドガイドライン | About

鳥が全てを表してるぜーってその通りなんですが、アイコンフォントのアイコン自体が意味を持つ場合は代替テキストなどを用意したいところです。そこで、i要素の中にテキストを入力し視覚的に見えなくして代替テキストっぽくしてみました。

HTML
<a href="https://twitter.com/masuP9">
<i class="fa fa-twitter fa-lg"><span>twitter</span></i>
<span class="username">@masuP9</span>
</a>
CSS
.fa span {
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
}

なんだかとても無理矢理なやり方な気がするので、他にいい方法は無いかしらと探すとWebsite Usability Infoさんの記事で

<i>要素の中に「aria-label="xxxxxxx"」(属性値「xxxxxxx」に具体的なラベルが入ります) を記述するのがスマートな気がしますが、支援技術側の対応状況がまちまちのようなので (~筆者中略~)、アイコン自体には「aria-hidden="true"」を適用して支援技術が無視するようにして、別途、近接するテキストでアイコンの意味に相当するラベルを記述し、CSS の「オフレフト」テクニックによって外観上は表示されないようにする...というのが現実的かもしれません。

装飾的なテキスト -- Website Usability Info

とあり、冒頭でも述べたとおり、鳥アイコンには近接するテキストでTwitterと記述できませんので、今のところは上記のようなやり方がいいのかなあ、と思っています。

またはアイコンフォントで使用するアイコンは装飾的なものに限り、意味を持つものは画像で配置しaltつけるのがシンプルかもしれません。その場合のアイコンフォントには、aria-hidden="true"を付与してやる方が良さそうですね。

もしくは有償だけど、合字によるアイコンフォントSymbolSetとかでもいいかもしれないなー。というかそれが一番だな。ちなみにソーシャル系のアイコンセットは5ドルとのこと。

参考