こんにちは！
アソビュー株式会社でデザイナーをやっている山中です。
今回のテーマは、アクセシビリティ×アイコンです。
様々なアイコンフォントを提供しているサイトがありますが、そのままのコードで使ってしまうとアクセシビリティ的によくありません。
課題
具体的には、スクリーンリーダーでサイトを読み上げながら閲覧している方々にとっては、アイコンあたりで意味不明な情報を聞かされることになってしまいます。
課題の例
かんたんな例をあげてみます。
上の画像を見られる方々には、A地点まで
- 車で10分
- 電車で13分
- 自転車で28分
- 徒歩で1時間32分
となんとなくわかると思います。
（※実際にはこのようなデザインを作ることはないと思いますが）
アイコンフォントサイトのコードをそのままコピーしたものを利用すると、
<i class="icon-car"></i>10分
のようになってしまい、スクリーンリーダーでサイトを読み上げて利用して閲覧している方々には、「現地点からA地点まで10分、13分、28分、1時間32分」とだけ聞かされることになり、よくわからないことになります。
コード記述方法で解決
よくわからない状態をよくしていきましょう。
今回の例のアイコンはA地点までの移動手段をわかるようにする。ことでアクセシビリティ観点でもよくなります。
アイコンが示すものを説明したいときは、
以下のように aria-label を記載していきます。
（※セマンティクス定義のroleは今回のお題では説明不必要の為、省きます）
<i class="icon-car" aria-label="車"></i>10分
このようにコードを記述をすれば、「現地点からA地点まで車で10分、電車で13分、自転車で28分、徒歩で1時間32分」と、理解できるようになります。
補足
アイコンがあるとこ全部に aria-label を入れれば良いということではなく、今回の例のように、アイコンが示すものを説明しないとそのコンテンツの意味が伝わらないときに活用すると良いと思います。
ほかにも、 aria-hidden="true" など、WAI-ARIAを参考にしてみると良いです。
CSSにもSpeech Moduleがあります。
最後に
アソビュー！では一緒に事業をつくる仲間を絶賛募集中です。
活気ある企業でバリバリ活躍したい方！お待ちしております！
