Web アクセシビリティを考慮する上で、不要な情報をスクリーンリーダーに読み上げさせないことは重要です。そのために使われる属性が aria-hidden です。しかし、誤った使い方をすると逆にユーザー体験を損ねる可能性があります。この記事では aria-hidden の正しい使い方と注意点を解説します。
aria-hidden とは？
aria-hidden は WAI-ARIA 属性のひとつで、「要素をスクリーンリーダーの読み上げ対象から除外する」ために使います。値は true または false を指定します。
<span aria-hidden="true">★</span> 評価: 5この場合、視覚的には「★」が表示されますが、スクリーンリーダーには「評価: 5」とだけ読み上げられます。
基本の使い方
aria-hidden="true"… スクリーンリーダーに読み上げさせないaria-hidden="false"… 読み上げ対象にする（初期値なので省略可）
重要なのは、視覚的に必要な要素であっても、音声読み上げでは不要な装飾などに使う点です。
よくある利用シーン
1. 装飾アイコンを読み上げさせない
<button>
<span class="icon" aria-hidden="true">🔍</span> 検索
</button>
アイコンは視覚的に意味を補いますが、隣にラベルがあるためスクリーンリーダーには不要です。
2. 擬似的な装飾文字を隠す
<h2><span aria-hidden="true">◆</span> お知らせ</h2>
装飾用の記号を読み上げないようにできます。
3. 視覚的に表示しているが、代替テキストを用意している場合
<span class="star" aria-hidden="true">★★★★★</span>
<span class="sr-only">5点満点中5点</span>
視覚的には星を表示し、スクリーンリーダーには「5点満点中5点」と正しく伝えられます。
注意点
- 操作に必要な要素（リンクやボタンなど）に
aria-hidden="true"をつけてはいけません。 - スクリーンリーダーだけでなくキーボード操作の対象からも外す必要がある場合は
tabindex="-1"と組み合わせます。 - 非表示にしたいときは
display: none;やvisibility: hidden;ではなく、状況に応じてaria-hiddenを使うのが正解です。
まとめ
aria-hidden は「装飾目的の要素をスクリーンリーダーに読み上げさせない」ための属性です。意味のある情報には決して付与せず、代替テキストを併用するのが正しい使い方です。視覚と音声の両方で適切に情報を伝えるよう工夫しましょう。
