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

aria-hidden プロパティ とは、WAI-ARIA の仕様で定義されている、テキスト読み上げの有無を設定する値です。
主にアイコンフォントのタグに指定するケースがほとんどだと思いますが、今回はこの area-hidden プロパティ についてのメモしておきます。

目次

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

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

今回説明に使用する CSS フレームワークは Bootstrap、アイコンは自家製アイコンフォントの MellowGlyph を例にとって説明したいと思います。

装飾アイコンの場合

機能に関係なく、単なる装飾であるアイコンの場合、aria-hidden=”true” を設定することで、スクリーンリーダーに対して存在しないものと認識させることができる。

<i class="mg mg-angle-up" aria-hidden="true"></i>

表意アイコンの場合

アイコンの意匠そのものに機能的な意味が含まれる場合、aria-hidden=”true” を設定したうえで、代替テキストspan class=”sr-only” に記述し、スクリーンリーダーに認識させます。

<i class="mg mg-ban" aria-hidden="true"></i>
<span class="sr-only">Do not disturb</span>

インタラクションアイコンの場合

アイコン自体がリンクになっていて、タッチやマウス等の入力デバイスによるインタラクションが発生する場合、aria-hidden=”true”title プロパティ 設定したうえで、代替テキストspan class=”sr-only” に記述し、スクリーンリーダーに認識させます。

<a class="btn btn-danger" href="#">
  <i class="mg mg-trash" title="Delete" aria-hidden="true"></i>
  <span class="sr-only">Delete</span>
</a>

まとめ

アイコンのアクセシビリティを解決する方法として、タグを使用せずに ::before, ::after といった擬似要素で指定する方法があります。

ただし、この方法をとる場合は、定義された名前空間による直感的なコーディングが困難なため、タグで直接記述し、area-hidden プロパティ を適切に指定する方法が簡単かつ便利かと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents