「aria-hidden」とは?消してもアイコンが表示されるけど必要なの?Webフォントのアイコンに使われている理由。

2021-04-12

FontAwesomeでアイコンのクラスと共に記述してある「aria-hidden="true"」とは何なのか?

このクラスを削除してもアイコンは無事に表示されます。そもそも何のために使われているのか?必要なのか?

aria-hiddenと関連性のあるsr-onlyクラスについても記述します。
FontAwesome4でよく見かけたのに、FontAwesome5では無くなっている理由についても触れています。

「aria-hidden="true"」が指定されている箇所は、ブラウザの音声読み上げでスキップされます。

area-hiddenプロパティについて

直訳すると「隠された領域」となりますが、アイコンは表示されます。
この隠されたというのは見た目ではなく、ブラウザなどの音声読み上げ機能(スクリーンリーダー)に対して隠されたという意味です。

画面を見ることが難しい時に使用される音声読み上げ機能(スクリーンリーダー)に対して読み飛ばす設定がarea-hiddenなわけです。

Webフォントのアイコンと大きくかかわってきますので、まずアイコンについて…

FontAwesomeなどのアイコンには下記の2通りの使い方があります。

・視覚的な装飾として使用する。
・意味や機能を持つ部品として使用する。
aria-hiddenとは?_001

装飾アイコンの例

ほとんどのWebサイトでアイコンは「視覚的な装飾」として使用されています。
アイコンが表示されなくてもページ自体は読めるサイトがほとんどです。

aria-hiddenとは?_002

セマンティックアイコンの例

スマホ用のハンバーガーメニューのようにアイコンが1つだけ使用されていることがありますが、このような使い方はアイコンそのものが意味と機能を持ちます。

技術的な呼び方はインタラクティブコントロールとして使用されるセマンティックアイコンと言われるらしい…

FontAwesomeにarea-hiddenが使われる理由

FontAwesome4にはクラス名と共に「aria-hidden="true"」が指定されていますが、これはアイコンは音声読み上げでスキップしてね!という意味。

音声読み上げのみでサイトを閲覧すると分かりますが、装飾の為だけに使われているアイコンがリーダーに拾われ、読み上げられるととても聞きづらくなります。

それ故ほとんどのアイコンにarea-hiddenが設定されているのだそう。
trueを指定しておくと読み上げがスキップされます。

area-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"を省略して使用したくなるかもしれませんが、削除しないでください。
スクリーンリーダーの仕様に従った値を持つことが重要です。

ちょっと翻訳が怪しいですが、消さない方が良いみたいです。
ページが重たくなるレベルではなく、アクセシビリティは高い方が検索エンジンから高評価を受けやすいと思うので、触らない方がよさそうです。

アイコンを音声読み上げさせる方法

ではアイコン自体もスクリーンリーダーに読み上げてほしい場合はどうするのか?
falseを指定すると良さそうですが、そうではありません。
リーダーで読み上げるには代替えテキストを設定しておく必要があります。

"sr-only"クラスを使う

スクリーンリーダー用に「sr-only」というクラスがあります。
このクラスをspanタグなどで使用し、その中に代替えテキストを入れると音声読み上げされるようになります。

<i class="fa fa-home" aria-hidden="true"></i><span class="sr-only">家のアイコン</span>
表示結果:家のアイコン

sr-onlyの使い方_003見た目は同じですが、アイコンの部分で音声読み込みされます。

またハンバーガーメニューなどアイコン1つが意味を成し、クリックされたりする場所にはtitleタグを設定します。

<i class="fa fa-bars" title="サイトメニュー画面" aria-hidden="true"></i><span class="sr-only">クリックするとメニューが開きます</span>
表示結果:クリックするとメニューが開きます

sr-onlyの使い方_004titleを設定しているとマウスオーバーでタイトルが表示されるようになります。

"sr-only"はSEO的にどうなのか?

sr-onlyクラスは音声読み上げに使用されるクラスなので見た目の変化はほぼありませんが、ソースコードを見るとテキストがしっかり埋め込まれています。
sr-onlyの使い方_0051px×1pxの領域にテキストが存在する!

「見えないのに存在する」=「隠されたコンテンツ」にならないのか?

SEOについてはブラックボックスなので考察の域を出ませんが、問題になるのは「悪意のあるコンテンツ」に限るはずです。

スクリーンリーダーにも対応したWebサイトはパソコンの画面を見づらい人にとってユーザビリティを高めています。

全員が使いやすいサイトを設計して評価が落ちるか?
筆者はsr-onlyクラスを使う際、SEOについては考慮しなくて良いと考えています。

少なくともアイコンに全く関係のないキーワードを詰め込む訳ではないのでブラックハットではないでしょう。

FontAwesome5でarea-hiddenが無い

バージョン4までは使いたいアイコンのコードをコピーする場所に「area-hidden」も同じく記載されていたのですが、バージョン5ではアイコンのコードをコピーする場所に「area-hidden」が記載されていません。

FontAwesome5で「area-hidden」が無くなったのではなく、FontAwesome5ではこのアクセシビリティを自動付与するようにアップデートされました。

具体的にはアイコンにタイトルを設定しておけば自動的に"sr-only"クラスの中にタイトルが入ります。

<i class="fas fa-bars" title="サイトメニュー画面" aria-hidden="true"></i>

sr-onlyの使い方_006開発者ツールで確認するとsr-onlyクラスが自動で挿入されています!良いね!
(KITでFontAwesome5を使っている場合、4のクラス名でも自動挿入されました。)

FontAwesomeでKITを使っている方は設定画面の下部でこの機能のオン、オフを設定することが出来ます。

設定画面についてはコチラ
【関連記事】FontAwesome5から使用可能!KITの設定について。

まとめ

FontAwesomeに使用されていた「area-hidden」について勉強したところ、スクリーンリーダーやsr-onlyクラスについても勉強することとなりました。

国のホームページなどはこういうところまでしっかり設計されているのでしょう…
便利な時代になった分、知っておいたほうが良い知識も増えてきていますね・w・

-サイト構築

© 2021 ソロ学