【初心者向け】aria-hidden="true"の使い方を徹底解説！スクリーンリーダーと視覚表示を分けるコツ

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Web制作において、ユーザーにとって見やすく、使いやすいページを作ることは大前提。
特に最近では「アクセシビリティ」が重視されるようになってきました！
そこで今回は、aria-hidden="true" の正しい使い方について、初心者にもわかりやすく解説します！

aria-hidden="true" とは？

aria-hidden="true" は、スクリーンリーダーに対して要素を無視させるためのHTML属性です。
つまり、画面上には表示しているけれど、読み上げソフトには読み上げさせたくない、というときに使います。

<span aria-hidden="true">★</span>

上記のように指定すると、視覚的には「★」が表示されるけれど、スクリーンリーダーでは読み上げられない、という仕組みになります。

なぜ aria-hidden を使う必要があるの？

たとえば以下のようなケースでは、aria-hidden="true" を使うことで、ユーザー体験が向上します。

実例：アイコンフォントとの併用

たとえば、ボタンにアイコンを加えたいけれど、そのアイコンはスクリーンリーダーで読み上げる必要がないとき：

<button>
  <span class="icon" aria-hidden="true">🔍</span> 検索
</button>

このように記述することで、「🔍」は見た目だけで表示され、「検索」だけが読み上げられる状態になります。

誤用に注意！意味のある情報は隠してはいけない

例えば、以下のような誤用はNGです。

<p aria-hidden="true">営業時間：10時〜18時</p>

このようにユーザーにとって重要な情報を非表示にすると、視覚障がいのある人が内容を把握できなくなってしまいます。

JavaScriptとの連携でダイアログ制御

モーダルウィンドウ（ダイアログ）などのUIで、現在アクティブでない部分を一時的に読み上げさせないときに便利です！

document.getElementById("main").setAttribute("aria-hidden", "true");
document.getElementById("dialog").removeAttribute("aria-hidden");

こうすることで、スクリーンリーダーが現在フォーカスすべき領域だけを読み上げるようにコントロールできます。

SEOには影響するの？

基本的に、aria-hidden はスクリーンリーダー用の設定であり、SEOへの直接的な影響はありません。
ただし、重要なテキスト情報をこれで隠してしまうと、Googlebotが認識しない可能性はあります。
意味のあるテキストには使わないように注意しましょう。

まとめ：装飾には使って、情報には使わない

あなたのWebサイトが、すべてのユーザーにとって使いやすいものになりますように！

satokotadesignキャンペーン実施中！