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

WAI-ARIAの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についての解説でした!

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。