その「区切り線」、本当に必要？ `
`タグをアクセシブルにするための小さな魔法
Webサイトを作っていると、記事のセクションを分けたり、ちょっとしたデザインのアクセントとして「横線」を引きたいときがありますよね。そんなときに活躍するのが `
` タグです。
でも、この `
` タグ、実は「ただの線」として置いているだけだと、スクリーンリーダー（視覚障がいのある方が使う、画面を読み上げるソフト）を使っている人にとっては、少し「お節介な存在」になってしまうことがあるんです。
今日は、そんな「小さなこだわり」が大きな優しさに変わる、`aria-hidden=”true”` という魔法のお話をしましょう。
—
そもそも ` ` って何をしているの？
HTMLの歴史を紐解くと、`
` は「Horizontal Rule（水平な罫線）」の略ですが、現代のHTMLでは単なる「飾りの線」ではなく、「話題の区切り（テーマの転換）」という意味を持っています。
例えば、料理のレシピサイトで「材料」のリストが終わって、次の「作り方」に移るとき。こういう「話の区切り」に使うのは、まさに `
` の本来の使い方です。
つまずきポイント：デザインのための「線」は要注意！
問題は、「なんとなく余白を埋めたいから」「デザイン的にかっこいいから」という理由で入れた線です。
スクリーンリーダーは、`
` を見つけると律儀に「区切り線」と読み上げることがあります。もし、ただの飾りとして入れた線で「区切り線！」と何度も読み上げられたら、ユーザーはどう感じるでしょうか？ 読みたい文章が分断されて、なんだか少し、もどかしい気持ちになりますよね。
「見えない存在」にする魔法：aria-hidden=”true”
ここで登場するのが `aria-hidden=”true”` です。
これは、「この要素は視覚的な飾りであって、意味のある情報じゃないから、スクリーンリーダーは無視してね！」とブラウザに伝えるための合図です。
お買い物のレシートで例えると…
想像してみてください。お買い物をしたあとのレシートに、デザインのためのオシャレな「星マーク」が散りばめられているとします。
店員さんがレシートの内容を読み上げてくれるとき、「〇〇円、星マーク！ ××円、星マーク！」なんて言われたら、必要な情報が耳に入ってきませんよね。
この「星マーク」を読み飛ばしてもらうための「見えない指示書」が、まさに `aria-hidden=”true”` なんです。
—
実践！コードで見る正しい使い方
では、実際にどう書けばいいのかを見てみましょう。コピー＆ペーストして、ご自身の環境で試してみてくださいね。
材料は以上です。
作り方
この使い分けのポイント
- 「話題が変わる場所」なら、そのまま：
HTMLに意味を伝えることは大切です。その場合は `aria-hidden` は不要です。
- 「ただの飾り」なら、aria-hidden=”true”：
情報としての意味がないなら、潔く隠してしまいましょう。これがWebアクセシビリティの第一歩です。
—
大丈夫、一歩ずつ進めばOKです！
「HTMLを書くときに、いちいちそんなことを考えなきゃいけないの？」と、少し難しく感じたかもしれません。でも、安心してください。
最初から完璧にできる人なんていません。まずは「この線は、本当に意味があるのかな？」と、一瞬だけ立ち止まって考えてみる。その「誰かに届けるための想像力」こそが、一流のエンジニアへの近道です。
今日からあなたのコードに、少しだけ「優しさ」を添えてみませんか？
そうやって積み重ねた気遣いが、いつか誰かのWeb体験を、最高に心地よいものに変えてくれるはずですよ。
それでは、また次回の記事でお会いしましょう！
コメント