aria-hidden とは、WAI-ARIA（Accessible Rich Internet Applications）仕様で定義されている属性のひとつで、スクリーンリーダーなどの支援技術に対して「この要素は無視してよい」と伝えるために使われます。
例えば、画面には見せたいけれど、音声読み上げでは不要な装飾アイコンや背景要素がありますよね。そうした要素に aria-hidden=”true” を付けると、スクリーンリーダーはその要素を読み上げなくなります。
重要なのは、aria-hidden は視覚的には要素を隠さないという点です。
CSS の display: none; や visibility: hidden; のように画面から消えるわけではなく、見た目には残したまま「支援技術だけに隠す」ことができます。
一方で、誤って意味のあるアイコンやテキストに aria-hidden を付けてしまうと、スクリーンリーダー利用者にとって情報が欠落してしまいます。したがって、正しい理解と使い分けが大切です。
aria-hidden は便利な属性ですが、使い方を誤るとアクセシビリティを大きく損なってしまうことがあります。ここでは、特に気をつけたい注意点と落とし穴を紹介します。
1. 意味のある情報を隠してしまう
aria-hidden=”true” を付けた要素は、スクリーンリーダーに完全に無視されます。
そのため、例えば「検索アイコン（🔍）」や「閉じるボタン（×）」など、操作や意味を持つアイコンに誤って付与すると、スクリーンリーダー利用者には何の機能かわからなくなってしまいます。
2. aria-hiddenは代替テキストの代わりにならない
aria-hidden を付けただけでは、代わりに情報を提供してくれるわけではありません。
もしアイコンや装飾の意味を伝える必要がある場合は、aria-label やスクリーンリーダー専用のテキスト（sr-only クラスなど）を併用する必要があります。
WEBサイト制作を主軸とし名刺やチラシなどオールジャンルのお仕事を承っております。
制作のご依頼だけでなくデザイン面などのご相談も受け付けておりますのでお気軽にお声がけください。
We Accept All Genres Of Work, Such As Business Cards And Leaflets, With A Focus On Website Production.
We Accept Not Only Production Requests But Also Design Consultations, So Please Feel Free To Contact Us.