Font Awesomeのアイコンフォントにタイトルと説明を加える方法

Font Awesomeのアイコンは、ちょっとしたアクセントとして使うことができますが、一見して分かるようなアイコンは、コンテンツ内で意味を持たせて使う場合もあります。例えば、チェックマークのアイコンは「はい/YES」、バッテンマークのアイコンは「いいえ/NO」と言う意味を視覚的に持たせることができます。

本記事ではアイコンフォントに意味を持たせて使う場合の適切なコード表示方法とアクセシビリティを考慮した記述について紹介します。

アイコンフォントに意味を持たせて利用する例

以下は、AMPページと通常ページにおけるAdSenseのサポートについての記事で掲載しているテーブルです。

広告フォーマット	通常ページ	AMP
テキストとディスプレイ広告	通常ページをサポート/YES	AMPページをサポート/YES
関連コンテンツ	通常ページをサポート/YES	AMPページをサポート/YES
インフィード	通常ページをサポート/YES	AMPページはサポートされていません/NO
記事内広告	通常ページをサポート/YES	AMPページはサポートされていません/NO
リンクユニット	通常ページをサポート/YES	AMPページをサポート/YES
自動広告	通常ページをサポート/YES	AMPページをサポート/YES
アンカー広告	通常ページをサポート/YES	AMPページはサポートされていません/NO
モバイル全画面広告	通常ページをサポート/YES	AMPページはサポートされていません/NO

比較テーブルの中でYESとNOをアイコンフォントを使うとシンプルで分かりやすいです。アイコンに加えて、テキストでも説明することもできますが、アイコン単体でも一見して意味が分かるので、アイコンのみの表示の方がスッキリした印象を与えます。

アイコンフォントに意味を持たせて使う場合の注意点

上で紹介した比較表でのアイコンフォントの使い方は、視覚的に効果的に伝えることができます。しかし、アイコンフォントだけを設置した場合、目の不自由な方には逆に分かりづらい可能性があります。

また、人間が見た場合に一見して明らかであっても、アイコンフォントだけを使用した場合、検索エンジンにとっても、アイコンフォントによる意味が伝わらない、理解しづらい内容となります。

アイコンフォントを意味を持たせて使う場合は、アクセスビリティを考慮して、画像に適切なタイトルを付け、altタグで説明を加えることと同様にアクセスビリティを考慮した適切な設定をすることが重要です。

アイコンフォントとアクセシビリティ

以下はFont Awesomeのサイト Accessibilityのページに記載されている内容を要訳したものです。

スクリーンリーダー等の現代のアシスティブテクノロジーは、特定のユニコードのキャラクター（文字）と同様にCSSで生成されたコンテント（Font Awesome アイコンの描画）を読み取ります。描画されたアイコンのデフォルトのマークアップを読み込んだ時、アシスティブテクノロジーは以下の様な問題が生じる可能性があります。

アシスティブテクノロジーは、ユーザーに読み上げるコンテントを見つけることができない場合があります。
アシスティブテクノロジーは、ユニコードの該当する部分を読み取るかもしれませんが、アイコンに意味を持たせて使用している箇所を該当するところが無かったり、混乱を生じさせるような恐れがあります。

アクセシビリティを考慮したFont Awesomeの使用法

コンテンツ内にアイコンを使用する場合、アシスティブテクノロジーがFont Awesomeのアイコンを理解したり、無視させることに役立つマニュアル操作を以下に紹介します。

アイコンを純粋な飾りや見た目のスタイリングに使用する場合

アイコンを、飾りやブランディングとして追加するような使い方では、サイトやアプリを操作するユーザーに読み上げて発音する必要はありません。また、アイコンを視覚的に強調したり、既にHTMLで表現されたコンテントのスタイリングに追加するような場合には、アシスティブテクノロジーを使用しているユーザーに繰り返して伝える必要はありません。aria-hidden=”true”をFont Awesomeのマークアップに追加することで、読み取られない（読み上げられない）ようにします。

純粋な飾りの場合：

リンクの前にアイコンを使用した例：

<a href=”https://github.com/FortAwesome/Font-Awesome”> このプロジェクトのコードを Githubで見る</a>

アイコンに意味を含めたり、インターラクティブの目的で使用する場合

単に飾りの要素だけではなくアイコンに意味を持たせて使用する場合、アシスティブテクノロジーにアイコンに持たせている意味を伝えるようにします。これは、ボタン、フォームの要素、トグルなどのインターラクティブの操作を含めてアイコンによって簡略的に伝えることなどの場合です。

アイコンはインターラクティブの要素がない場合：

テキストによる代わりを提供する最もシンプルな方法は、アイコンに aria-hidden=”true” アトリビュートを使用して、等の追加要素をテキストで含め、視覚的にはCSSなどで隠しながらアシスティブテクノロジーにはアクセス可能にさせることです。さらに、title 要素をアイコンに加えて、マウスを使用したユーザーにはマウスオーバーして表示させることもできます。

アイコンに残り時間を示すようにして使用している例：

試験の残り時間は60分です。

試験の残り時間は30分です。

残り時間はありません。

上の砂時計のアイコンにマウスオーバーすると説明が表示されます。

試験の残り時間は60分です。
試験の残り時間は30分です。
残り時間はありません。

アイコンはインターラクティブの要素がある場合：

インターラクティブな要素がある場合、視覚的に隠されたの様なものは必要なく、置換テキストやラベルを要素に含める方法はいろいろあります。例えば、シンプルにテキストの説明を aria-label 要素でインターラクティブの要素に加えることで、その要素にアクセシブルな置換名を与えることができます。マウスオーバーなどした時に視覚的なトゥールティップが必要な場合は、title アトリビュートをくわえることでできます。

削除ボタンにアイコンを使用して、title アトリビュートでマウスのトゥールティップを提供する場合：

Google Search Consoleのヘルプページのアイコンフォント例

Googleのヘルプページなどで、アイコンフォントをナビゲーションなどのインターラクティブの要素に使用しています。ページの右上のベルのアイコンはお知らせ、その左隣はGoogle アプリのリスト表示させる用途で使用されています。通常のブラウザーで表示した場合は、アイコンだけが表示されます。マウスオーバーすると、テキストで説明が表示されます。

以下の画像は、ベルの上にマウスオーバーして、「お知らせ」のテキストが表示されているスクリーンショットです。ユーザーにとって使いやすく、理解しやすいコンテンツを作成することは重要なことです。アクセシビリティを考慮したコンテンツは、総合的な品質を高めることに繋がります。