WAI-ARIAのaria-hidden属性の使い方

これまでご紹介してきたWAI-ARIAのaria-label, live-regionsに引き続き、aria-hiddenについてご紹介します。

WAI-ARIAとは

WAI-ARIAというのは、アクセシビリティのための仕様で、HTMLと一緒に使われるマークアップ言語です。詳しくはaria-labelの解説記事でご紹介していますので、そちらをご参照ください。

aria-hiddenとは

aria-hiddenは、role, state, propertyと3種類あるWAI-ARIAの仕様の中のstateで、スクリーンリーダーに無視してもらいたいものにつけるものです。aria-hidden="true"でスクリーンリーダーが無視することになります。stateは状態を示すために用いる種類のものなので、スクリーンリーダーが無視すべき状態であることを示す、ということですね。

具体的には、装飾のためのものにつけることになります。装飾の画像の場合は、alt=""にする（altの値を空にする）というのが正であることに変わりはないので、混合しないようにしましょう。

aria-hiddenの使い方

使いどころはアイコンの場合になると思います。

<li><span class="icon" aria-hidden="true"></span>メニュー</li>

フリーのアイコン素材として有名でよく使われるFont Awesomeはデフォルトでaria-hidden="true"となっています。

aria-hiddenに対するスクリーンリーダーの対応

実際のところ、スクリーンリーダーはどう対応しているかと言いますと、私が試すのに用いているNVDAではそもそもアイコンはデフォルトで無視します。なので何も変わりません・・。ラベルがないものの存在をいちいち読み上げていたら、スクリーンリーダーユーザーにとってひどく煩わしいことになりますよね、きっと。

Googleによる評価ツールであるLighthouseによる採点も、aria-labelが適切に使われてなければ減点になることはありますが、aria-hiddenが付いてないから減点ということはされません。

そのため、実用的にどうかという観点で考えている私は正直aria-hiddenは、現時点では付けてません。

ちなみに、Font Awesomeのソースコードはi要素が使われてますが、実はあれ、使い方間違ってるってご存じでした？i要素は、他のテキストと区別する必要のあるもの、例えば慣用句、技術用語、分類学上の呼称などに用いるものであって、装飾のためのアイコンに用いるものではありません。装飾のためのアイコンはspan要素を使う方が適切です。iconの頭文字がiなので、それっぽくなって使われてしまっている現状がある感じがしますね。

まとめ

以上、aria-hiddenについての解説でした！