【HTML】
aria-hiddenってなに？
読み上げスキップ指定の書き方

WEBページ制作で、とってもベンリなアイコンフォント。

検索窓のアイコンや、ちょっとしたアクセントに大活躍してくれますよね。

特に『Font Awesome』は無料で使えるありがたーいアイコンフォントなので、愛用している方も多いのではないでしょうか。

今回は、そんなベンリなアイコンフォントを使うとき、一緒に指定しておきたいHTMLタグ「aria-hidden」について、その効果や使い方をざっくりとまとめてみました。

「aria-hidden」の効果

HTMLタグである「aria-hidden」は、WEBページで音声読み上げを利用しているとき、アイコンフォントなどを「文字」として読み上げてしまうのを防止できるタグです。

「aria-hidden="true"」と指定することで、その部分だけ「読み上げをスキップ（読み上げない）」してくれます。

「ウェブページの音声読み上げ機能」は、目が不自由な方にもページ情報を伝えることが出来る補助機能です。

音声だけで情報を取得するとき、文脈と関係ないもの（アイコンフォントの名前など）まで 一緒に読み上げられると、おかしな文章になってしまいますよね。

読み上げる必要のない要素には「aria-hidden="true"」を指定しておけると、より分かりやすく情報を伝えることが出来ます。

また、「aria-hidden」などの読み上げ指定について、下記サイト様で詳しく解説されているので、詳しく知りたい時は一読して見てくださいね。
「MONOCHROME DESIGN」

HTML「aria-hidden」使い方

「aria-hidden」の使い方は簡単で、アイコンフォントの指定と一緒に「aria-hidden="true"」をちょちょいっと追記すればOK。

私もよくお世話になっている『Font Awesome』を例にすると、こんな感じです。

<i class="fa fa-search" aria-hidden="true"></i>

この例だと、アイコンフォント「」に
「aria-hidden="true"」を指定して「読み上げスキップ」指定をしています。

CSSで「読み上げスキップ」指定するには？

HTMLで読み上げスキップをする時は、アイコンフォントに「aria-hidden="true"」を指定すればOKでしたが……

CSSで「::before」や「 ::after」といった疑似要素でアイコンフォントを使う場合には、どう指定するのでしょうか？

「::before」「::after」で追加した要素は、「content:""」の中身が読み上げられるそうです。

疑似要素の読み上げを回避するには、「speak: none;」を指定すれば、読み上げをスキップさせる事ができます。

.sample::before{
	font-family: fontawesome;
	content: "\f002";
	speak: none;
}

「読み上げスキップ」指定はぱっと見こまかい部分に見えますが、自分のWEBサイトの「アクセシビリティの向上」に繋がる心遣いです。

「アクセシビリティ向上」というと奥が深く難しそうなイメージですが、できるところから取り入れるのも、何もしないよりは断然いいはず！ぜひ取り入れてみましょう。