モバイル端末をはじめとして高解像度ディスプレイを搭載した端末が普及したことにより、ウェブサイトでも高解像度でも劣化しないで表現が可能なベクター形式のデータが用いられることが増えてきました。

ベクターデータの中で最も用いられているのはフォントデータではないでしょうか。フォントデータは複雑な色の表現が難しいとはいえ、スタイルシートのみで大きさや色をコントロールしやすいということもあり、アイコンなどの形状をフォントとして登録したアイコンフォントも多く使われています。

独自のフォントデータを配信するウェブフォントも、古くからブラウザにて実装されていたことや Font Awesome など、使用しやすいライセンスで提供されているデータが増えていることも活用の後押しとなっています。

簡単なHTMLを挿入するだけで高品質のアイコンが使用できるので多くのウェブサイトでも使用されていますが、そのまま使用するだけではアクセシビリティを損なう可能性もあります。

まずフォントや画像データで配信するに限らず、アイコンを使用するにあたって留意すべき点としてアイコンは視覚的な認知に限るという点です。

例えば下記の例で言えば、視覚的にはTwitterというウェブサービスだと認識でき、リンクが設定されている場合は、該当する人や組織のTwitterアカウントへのリンクだというところまで推測できそうです。（Twitterのロゴの認知度はこの場合置いておきます）

しかし視覚的な認知が出来ない場合（視覚障害者に限らず、検索エンジンなどの機械も含む）やアイコンが何らかの原因で表示できない場合には、意図する情報が伝わりません。そのような場合を考慮して、alt属性に代替テキストを設定したり、近接する位置にテキストを追加したりすることが望まれます。

画像でアイコンを提供する場合は、多くの場合alt属性を利用して、代替手段を提供することが多いかと思いますが、アイコンフォントを利用する場合は提供されるHTMLのサンプルでは十分に代替手段が提供されていないことが多くあります。

例えば、通常使うような文字にアイコン形状が割り当てられているケースでは、アイコンは "t" の一文字のみで表現されますので、Twitterであることの認知が出来ないどころか、ノイズにもなりかねません。

<style>
  .icon-font {
    font-family: "アイコンフォント名"; /* フォントはダミー */
  }
</style>
<span class="icon-font">t</span>

上記の問題をさけるために多くのライブラリは、CSSの擬似要素を使用したり、ユニコードの 私用文字 を利用したりする方法が取られています。

<style>
  .fa-twitter:before {
    content: "\f099"; /* Font Awesome */
  }
</style>
<i class="fa fa-twitter"></i>

ただし、上記の例でもそれだけでは代替手段が用意されているわけでは無く、また最近のスクリーンリーダーや検索エンジンはCSSを理解し擬似要素で生成するテキストも理解しようと務めているためノイズが無くなる問題も解決しきれていません。

フォントとして提供する以上は、通常使用する文字や私用文字に限らず何かしらのテキストデータを必要とします。その場合に考えられる解決策は主に下記の二つです。

• アイコンに割り当てれられている文字でも意図が伝わる
• アイコンに割り当てられている文字を認識させず、別途テキストを用意する

前者の「アイコンに割り当てられている文字でも意図が伝わる」ようにするには、リガチャ（合字）の機能を使用したアイコンフォントを使用します。例えば、Symbolset というライブラリがあります。

リンク先のテキスト入力欄で"time"や"user"と入力すると意味がわかるかと思いますが、ある文字の組み合わせに対してアイコンの形状を割り当てているので下記のHTMLでアイコンが表示されます。

<style>
  .ss-icon {
    font-family: "SSStandard";
  }
</style>
<span class="ss-icon">time</span>

ただし必ずしも利用したいアイコンがリガチャ機能を持っているとは限りません。その場合は、後者の「アイコンに割り当てられている文字を認識させず、別途テキストを用意する」方法を取ります。

その場合、WAI-ARIAの仕様にあるaria-hiddenやaria-labelを使用します。

aria-hiddenは、スクリーンリーダーなどの機械に対し認識しなくていいという情報を提供し、aria-labelは、認識すべきテキストを提供します。

下記は、aria-hiddenでアイコンフォントのテキストを隠し近接するテキストを追加した例です。

<style>
  .icon-font {
    font-family: "アイコンフォント名";
  }
</style>
<span class="icon-font-twitter" aria-hidden="true">t</span>
digiperをTwitterでフォロー

下記は、aria-labelで認識させたいテキストを追加した例です。

<style>
  .fa-twitter:before {
    content: "\f099" /* Font Awesome */;
  }
</style>
<i class="fa fa-twitter" aria-label="digiperをTwitterでフォロー"></i>

これまで注意点ばかりを述べてきましたが、画面解像度などで劣化せず、CSSなどでコントロールしやすいアイコンフォントはユーザにとっても制作者にとってもメリットは大きい技術です。使用する際には、そのアイコンが表示されないケースのことに気を払って使ってみてはいかがでしょうか。