【入門編】aria-hiddenによる装飾的インライン要素の除外 – HTML実践ガイド

「それ、本当に読んでほしい？」HTMLの装飾をスクリーンリーダーからそっと隠す魔法の属性『aria-hidden』

こんにちは！Web制作の世界へようこそ。

HTMLを書き始めると、ボタンの中にアイコンを入れたり、デザインのアクセントのために``タグで小さな飾りをつけたりすること、ありますよね。見た目はとっても素敵になるのですが、実はその裏側で「視覚情報」と「音声情報」のミスマッチが起きている可能性があることをご存知でしょうか？

今日は、そんな「目には見えるけど、読み上げなくていいもの」を、スクリーンリーダー（画面読み上げソフト）から優しく隠すための魔法、`aria-hidden=”true”`についてお話しします。

—

想像してみてください。あなたは今、目の見えない友人と一緒にショッピングサイトを見ています。友人はスクリーンリーダーを使って、ページの内容を耳で聞いています。

そこで、こんなコードに出会ったらどうなるでしょう。

もし、この`icon-star`というクラスに、CSSで「★」という文字を擬似要素（`::before`など）で表示させていた場合、スクリーンリーダーは空気を読まずにこう読み上げることがあります。

「星マーク。お気に入りに追加」

……あれ？「星マーク」なんてわざわざ言わなくても、「お気に入りに追加」だけで十分意味は通じますよね。むしろ、毎回余計な記号を読み上げられたら、友人はお買い物のリズムを崩して疲れてしまうかもしれません。

このように、「見た目のためだけに置いている装飾」を、機械にいちいち説明させないこと。 これがアクセシビリティ（使いやすさ）の第一歩なんです。

—

そんな時に登場するのが、`aria-hidden=”true”`という属性です。これをつけると、スクリーンリーダーは「あ、これは飾りだな。無視しよう！」と判断して、その要素を読み飛ばしてくれるようになります。

先ほどのコードを、もっと優しく書き換えてみましょう。

これだけで、スクリーンリーダーは「お気に入りに追加」という、本当に伝えたい情報だけを届けてくれるようになります。簡単でしょう？

—

「便利だから全部に付けてしまえ！」と思うかもしれませんが、ここで一つだけ、絶対にやってはいけない注意点があります。

例えば、リンク（``）やボタン（`

コメント