FontAwesomeでアイコンのクラスと共に記述してある「aria-hidden="true"」とは何なのか？
このクラスを削除してもアイコンは無事に表示されます。そもそも何のために使われているのか？必要なのか？
aria-hiddenと関連性のあるsr-onlyクラスについても記述します。
FontAwesome4でよく見かけたのに、FontAwesome5では無くなっている理由についても触れています。
「aria-hidden="true"」が指定されている箇所は、ブラウザの音声読み上げでスキップされます。
この記事の目次
aria-hiddenとは？
FontAwesomeなどのWebアイコンを使用しているとaria-hidden="true"という記述があり、aria-hiddenが何のためにあるのか気になることがあります。
単刀直入に言うと、aria-hidden="true"は画面を見ることが難しい時に使用される、スクリーンリーダー（音声読み上げ機能）の読み上げをスキップする設定です。
例えば、
<i class="fa fa-home" aria-hidden="true"></i>
と書いておけば、この<i>タグはスクリーンリーダーに読み上げれらなくなります。
FontAwesome4ではクラス名と共に「aria-hidden="true"」が記述されていますが、これはアイコン部分は音声読み上げしないで！...という意味になります。
aria-hiddenを詳しく調べると、W3Cで定義されたWAI-ARIAという技術仕様のaria属性の１つで、要素の状態を示すStateにあたるとのこと...難しすぎるけど要はスクリーンリーダーに対応するための属性と言えますかね。
aria-hiddenの読み方
aria-hiddenの読み方を調べたところ「aria」の読み方は“アリア”となるようで、これは英単語ではなく「Accessible Rich Internet Applications」の略みたいです。
なので「aria-hidden」の読み方は“アリアヒドゥン”となります。
Web Accessibility Initiative – Accessible Rich Internet Applications （ WAI-ARIA、ウェイアリア ）は、World Wide Web Consortium （W3C）によって公開された技術仕様で、Webページ（特に動的ウェブページ）内のユーザーインターフェイスのアクセシビリティを向上させられる、HTMLのための属性が定義されている。
日本語の発音では“エリア”ということもあるようですが、英単語で領域という意味のarea（エリア）とは全く関係がない点に注意したいところです。
かく言う僕は当記事にコメントをいただいて勘違いと誤りに気が付きました。
aria-hidden="true"は読み上げスキップ
当記事では、FontAwesomeを例にaria-hiddenの使い方を解説していきます。
FontAwesomeなどのWebアイコンには以下の２通りの使い方があります。
- 視覚的な装飾として使用する。
- 意味や機能を持つ部品として使用する。
装飾アイコンの例
ほとんどのWebサイトでアイコンは「視覚的な装飾」として使用されています。
アイコンが表示されなくてもページ自体は読めるサイトがほとんどです。
音声読み上げのみでサイトを閲覧すると分かりますが、装飾の為だけに使われているアイコンがスクリーンリーダーに拾わ、読み上げられてしまうとページの内容が分かり辛くなります。だからアイコン部分に「aria-hidden="true"」を設定して読み上げをスキップするのです。
セマンティックアイコンの例
また、Webアイコンはスマホのハンバーガーメニューのようにアイコン自体をボタンとして使うことがありますが、このような使い方はアイコンそのものが意味と機能を持つので、後述する"sr-only"を使って読み上げに対応させることも出来ます。
aria-hiddenは削除したらダメ？
僕はスクリーンリーダーの対応よりもページ高速化！...そう思ってaria-hiddenの記述を削除するか迷った時期があるのですが、これはやめた方が良いみたいです。
FontAwesomeの公式ページでアクセシビティを確認すると次のようにありました。
Using property shorthand
You might be tempted to use and leave the ="true" part out. Don't, it's important for screen readers to have a value that follows the spec.
【日本語訳】
プロパティの省略形を使用する。
<i aria-hidden></i>や="true"を省略して使用したくなるかもしれませんが、削除しないでください。
スクリーンリーダーの仕様に従った値を持つことが重要です。
ちょっと翻訳が怪しいですが、aria-hiddenは消さない方が良いみたいです。
アクセシビリティは高い方が検索エンジンから高評価を受けやすいと思うので、触らない方がよさそうです。
アイコンを音声読み上げさせる方法
アイコン自体もスクリーンリーダーに読み上げてほしい場合はどうするのか？
aria-hiddenに指定できる属性値は以下のようになっています。
| 指定できる値 | 効果 |
| false | 要素はアクセシビリティAPI（スクリーンリーダー）に公開される |
| true | 要素はアクセシビリティAPI（スクリーンリーダー）から非表示になる |
| undefined | 要素の表示はユーザーエージェントによって決定される |
aria-hiddenにfalseを指定するだけでスクリーンリーダーに読み上げられてもらえそうですが、そうではありません。
Webアイコンなど、本来はスクリーンリーダーに読み込みをスキップされる要素を、スクリーンリーダーに読み上げさせるにはsr-onlyというクラスを使います。
"sr-only"を使って音声読み上げに対応させる
スクリーンリーダー用に「sr-only」というクラスがあります。
このクラスをspanタグなどで使用し、その中に代替テキストを入れると音声読み上げされるようになります。
<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">家のアイコン</span>
表示結果：家のアイコン
sr-onlyがある要素をスクリーンリーダーで読み上げた様子
見た目は同じですが、アイコンの部分で音声読み込みされます。
またハンバーガーメニューなどアイコンが意味を成し、クリックされたりする場所にはtitleタグも設定します。
<i class="fa fa-bars" title="サイトメニュー画面" aria-hidden="true"></i><span class="sr-only">クリックするとメニューが開きます</span>
表示結果：クリックするとメニューが開きます
Webアイコンのボタンにtitleタグを記述した様子
titleを設定しているとマウスオーバーでタイトルが表示されるようになります。
こんな感じで「aria-hidden」と「sr-only」と「title」の３つのタグを使うことで、アイコンボタンをスクリーンリーダーに対応させることができます。
"sr-only"はSEO的にどうなのか？
sr-onlyはSEO（検索エンジン最適化）に影響するのか？
sr-onlyクラスは音声読み上げに使用されるクラスなので見た目の変化はほぼありませんが、ソースコードを見るとテキストがしっかり埋め込まれています。
1px×1pxの領域にテキストが存在する！
「見えないのに存在する」＝「隠されたコンテンツ」とも見れそうですが、SEO的にマイナスになるのはあくまで“悪意のあるコンテンツを隠すこと”です。
全員が使いやすいサイトを設計して評価が落ちるか？
sr-onlyを正しく使うことは、パソコンの画面が見づらい人に対するユーザビリティを高めているので、むしろSEO的にプラスに働いてもおかしくないと思います。
筆者はsr-onlyクラスを使う際、SEOについては考慮しなくて良いと考えています。
FontAwesome5でaria-hiddenが無い
最後にFontAwesome4にあったaria-hiddenがFontAwesome5で無い件について...
バージョン4までは使いたいアイコンのコードをコピーする場所に「aria-hidden」も同じく記載されていたのですが、バージョン5ではアイコンのコードをコピーする場所に「aria-hidden」が記載されていません。
FontAwesome5で「aria-hidden」が無くなったのではなく、FontAwesome5ではこのアクセシビリティを自動付与するようにアップデートされました。
具体的にはアイコンにタイトルを設定しておけば自動的に"sr-only"クラスの中にタイトルが入ります。
<i class="fas fa-bars" title="サイトメニュー画面" aria-hidden="true"></i>
開発者ツールで確認するとsr-onlyクラスが自動で挿入されています！良いね！
（KITでFontAwesome5を使っている場合、4のクラス名でも自動挿入されました。）
FontAwesomeでKITを使っている方は設定画面の下部でこの機能のオン、オフを設定することが出来ます。
まとめ
FontAwesomeに使用されていた「aria-hidden」について勉強したところ、スクリーンリーダーやsr-onlyクラスについても勉強することとなりました。
国のホームページなどはこういうところまでしっかり設計されているのでしょう…
便利な時代になった分、知っておいたほうが良い知識も増えてきていますね・ｗ・
