Font Awesomeでも使われている「area-hidden=”true”」とはなんだろう

以前より、よくフォントアイコンは使っていますが、FontelloIcoMoonなどのいわゆるジェネレーター系のサービスを使ってフォントアイコンを生成し、それをダウンロードして使っていました。

最近はそれもちょっと面倒なので、自分のサイトではFont Awesomeを使う事が多くなってきました。CDN版だったらHTMLに1行追加するだけですぐ使えますし、デザインの好みはあるけれど主要なアイコンは大体揃っているので、サクッと作りたい時に非常に便利です。

Font Awesomeを使っていて思ったのですが、アイコンのソースコードの所にあまり見慣れない「area-hidden=”true”」という指定がありました。
特にこれを使用しなくても表示に問題は無いのですが、何のためにあるのか知らなかったので、少し調べてみました。

area-hidden=”true”とは、スクリーンリーダーの読み上げをスキップするための指定

area-hiddenプロパティについて調べてみると「WAI-AREA」で定められている仕様の1つであり、trueが指定してある場合、ブラウザにその要素が非表示であるという事を明示的に伝えるものとの事。
聞き慣れない用語が沢山出てきました・・・。一つ一つ調べてみます。

WAI-AREAとは

WAI-AREAは2つの略語がくっついて出来ている用語です。

まず、WAIは「Web Accessibility Initiative」の略で、体の不自由な方を含むすべての人がウェブを利用できるように、アクセシビリティの向上を率先する組織の事で、htmlなどの仕様を定めているW3Cの中にある組織です。

そしてAREAのほうは「Accessible Rich Internet Applications」の略であり、Javascriptなどで変化するUIであっても、その状態をスクリーンリーダーなどの支援技術に適切に伝える方法を定義しているものです。

昨今のwebでは単純なHTMLだけで作られることはほぼなく、Javascriptでアラートを表示したり、プログレスバーなどを実装したりと、webアプリケーションと呼べるほどリッチになってきています。その弊害としてスクリーンリーダーなどの支援技術が、その内容や状態を上手く把握できないので、WAI-AREAが誕生したという事のようです。WAI-AREAの仕様に沿ったマークアップをすることにより、リッチなコンテンツであっても適切に支援技術にその内容を伝えることができ、アクセシビリティの向上に繋がります。

webアクセシビリティ向上のためにフォントアイコンにはarea-hidden=”true”を指定しておいた方が良さそう

官公庁系サイトや、大手サイトの場合、アクセシビリティの確保は必須になっていると思いますが、そうじゃない小規模なサイトだとアクセシビリティの優先順位は低いのではないかと思います。誰もが使えるwebの実現の為に、もっとマークアップにも気を使っていかなければいけませんね。。

:beforeなどの擬似要素でフォントアイコンを指定する場合、speak:noneを使う必要がある

一つ注意点として、:beforeなどの擬似要素を使ってフォントアイコンを指定する場合もあるかと思います。スクリーンリーダーは:beforeなど擬似要素のcontentも読み上げるので、その場合はcssで、speak:none;と指定することにより、読み上げをスキップできます。

参考にしたサイト

以下のサイトを参考にしました。ありがたや。