aria-hidden プロパティ とは、WAI-ARIA の仕様で定義されている、テキスト読み上げの有無を設定する値です。
主にアイコンフォントのタグに指定するケースがほとんどだと思いますが、今回はこの area-hidden プロパティ についてのメモしておきます。
目次
- area-hidden プロパティについて
area-hidden プロパティについて
今回説明に使用する CSS フレームワークは Bootstrap、アイコンは自家製アイコンフォントの MellowGlyph を例にとって説明したいと思います。
装飾アイコンの場合
機能に関係なく、単なる装飾であるアイコンの場合、aria-hidden=”true” を設定することで、スクリーンリーダーに対して存在しないものと認識させることができる。
[code]
[/code]
表意アイコンの場合
アイコンの意匠そのものに機能的な意味が含まれる場合、aria-hidden=”true” を設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。
[code]
Do not disturb
[/code]
インタラクションアイコンの場合
アイコン自体がリンクになっていて、タッチやマウス等の入力デバイスによるインタラクションが発生する場合、aria-hidden=”true” と title プロパティ 設定したうえで、代替テキスト を span class=”sr-only” に記述し、スクリーンリーダーに認識させます。
[code]
Delete
[/code]
まとめ
アイコンのアクセシビリティを解決する方法として、タグを使用せずに ::before, ::after といった擬似要素で指定する方法があります。
ただし、この方法をとる場合は、定義された名前空間による直感的なコーディングが困難なため、タグで直接記述し、area-hidden プロパティ を適切に指定する方法が簡単かつ便利かと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。