読者です 読者をやめる 読者になる 読者になる

WEB部ログ

WEB部メンバーの勉強用ブログです。

WEB部メンバーの勉強用ブログです。

aria-hidden属性について

こんにちは、佐々木です。

2年生のみんなは五輪に向けてがんばっている真っ只中です。
テスト週間に入る前に私もWeb活を!と思ったので、記事を書かせていただきます。

aria-hidden属性について

若年の時にえいちゃんと発見した、aria-hidden属性についてまとめます。

font awesomeなどのアイコン用フォントを使用する際に、aria-hidden="true"を設定すると、その要素と子要素はユーザエージェント(Webブラウザやスクリーンリーダなど)に認識されないようになります。

ナビゲーションや見出しのアイコンは、デザイン的な理由で装飾されているものなので、Webサイトの内容には関係がありません。ですが、そのまま使用するとスクリーンリーダで関係のない言葉が読まれたり、同じ言葉が繰り返されて読またりしてしまいます。

そこで、aria-hidden="true"を設定してHTML内の意味を持った要素ではなく、装飾として認識されるようにします。

例:ホームのナビ
<a href="index.html"><i class="fa fa-home" aria-hidden="true"></i>ホーム</a>

 

逆にアイコンのみでボタンを作成する際には、title属性を設定して画面を見ているユーザにも文字でアイコンの意味を伝わるようにする必要があります。

例:Twitterのボタン
<a href="twitter.html"><i class="fa fa-twitter" aria-hidden="true" title="Twitter"></i></a>

 

また、アイコンそのままではなく別の言葉で読み上げてほしい場合はaria-label属性を設定します。

例:検索のアイコン
<i class="fa fa-search" aria-label="検索"></i>

 

 

アイコンを使用したデザインは好きなのですが、スクリーンリーダ越しの自分のWebサイトは関係のない言葉が入り交じっているのかと思うと恐怖です。

font awesomeを使用する際には気を付けたいと思います。

 

fontawesome.io

qiita.com