アクセスビリティーに配慮した「Font Awesome」にする方法！

• ふだん、Font Awesomeを使っている
• スクリーンリーダーでも読み上げる仕様にしたい！

こんな方向け。

Webサイト制作でお馴染みのFont Awesome。アイコンの種類が豊富かつシンプルで洗練されたデザインであり、どんなWebサイトでも使いやすいアイコンが勢揃いです。

しかも、基本無料！使わない手はないです。

ただ、アクセスビリティーは気になるところ。最近は政府（とくに、デジタル庁）がスクリーンリーダーに対応したWebサイトを推奨していて、もちろん検索エンジンの王者である「Google」も推奨している。

しかし、やや手間がかかるのが難点。アクセスビリティーに配慮するためのコードを覚えるのも大変です（参考：WAI-ARIA）。

そこで、今回はスクリーンリーダーで読み上げ対応したFont Awesomeのコーディング方法をご紹介します。

【前提】アイコンの種類は２つある

そもそもですが、アイコンには大きく2種類あります。

1. セマンティックアイコン
2. 装飾的なアイコン

この２つ。それぞれ意味を解説します。

意味を持ったアイコン（スクリーンリーダー対応）

専門的には「セマンティックアイコン」と呼ばれます。

セマンティックとは「単なる装飾ではなく、意味を伝えるために使用するアイコン」のこと。たとえば、

• SNSのアイコン
• ハンバーガーメニュー
• トップに戻る矢印

このようなアイコンは「装飾」ではないです。

このアイコンは「YouTubeのアイコンです」「グローバルナビゲーションです」「トップに戻ります」のように何らかの意味を持ちます。そのアイコンだけで閲覧者に意味を伝える役割を持ちます。お洒落だからつけているわけではないですね。

これがセマンティックアイコンです。

装飾的なアイコン

一方で、意味を持たない装飾的なアイコンも存在します。たとえば、

• 可愛らしさを出すためのアイコン
• お洒落さを出すためのアイコン
• かっこよさを出すためのアイコン

のように、そのアイコンは言語的な意味はなく、あくまでもサイトにイメージを持たせるための装飾です。これが装飾的なアイコンです。

スクリーンリーダーに対応したFontAwesomeの使い方

手順は、次のとおりです。

• アイコンのコードをコピペする
• <i>の中に、aria-hidden="true"を書く
• <span>にaria-hidden="true"を書く

たとえば、よくあるヘッダーをコーディングすると…

    <!-- header -->
    <header class="header">
      <div class="header-container w-container">
        <div class="site">
          <a href="index.html">
            <img src="./img/logo.svg" alt="boards" />
          </a>
        </div>
        <button class="navbtn">
          <i class="fa-solid fa-bars" aria-hidden="true"></i>
          <span class="sr-only">menu</span>
        </button>
      </div>
    </header>

ブラウザ上では下のようになります（hero画像のコードは省略しています。）

ボタンタグの中の＜ i ＞と＜span＞だけ抽出すると、

    <button class="navbtn">
        <i class="fa-solid fa-bars" aria-hidden="true"></i>
        <span class="sr-only">menu</span>
     </button>

上記のとおりです。

aria-hidden=”true”とclass=”sr-only”を解説します。

aria-hidden=”true”とは

aria-hiddenは、スクリーンリーダーに無視してもらいたいものにつけるものです。「true」や「false」はごちゃごちゃになりますが、「hidden？＝隠す？」に対して「true＝Yes!」なので「true」は隠します。

• aria-hidden="true"　 ＝　隠す
• aria-hidden="false"　＝　隠さない

よって、aria-hidden="true"でスクリーンリーダーが無視することになります。

装飾のためだけにアイコンを使用する場合はaria-hidden="true"を設定し、スクリーンリーダーに対して存在しないものと認識させます。

とはいえ、このコードを書いても画面上はまったく変化がありません。が、スクリーンリーダーで読み上げると、たしかに無視しますのでご安心を。

class=”sr-only”とは

また、要素内に代替テキストを書きます。支援技術からのアクセスを維持しながら要素を視覚的に非表示にするための適切な CSS も含めます。

最後に

Font Awesomeはアイコンの種類が豊富であり、アクセスビリティーに配慮したコーディングも可能です。

しかも、たった３つの手順でカンタンに実装ができるので、初心者にも扱いやすいです！