「ただの線」に意味を持たせていないか？ ` `タグと`aria-hidden`の正しい付き合い方
フロントエンドの現場で、「デザイン上の区切り線」をどう実装するか。CSSの`border`を使うのか、あるいはセマンティックに`
`タグを置くのか。迷った末に「とりあえず`
`を置いておくか」と実装し、そのまま放置していませんか？
実はその`
`、スクリーンリーダーを利用するユーザーにとっては「ノイズ」になっている可能性があります。今日は、HTMLの隠れた名脇役である`
`と、アクセシビリティの要である`aria-hidden`の正しい関係性について、深掘りしていきましょう。
—
` `タグの本質を再定義する
多くのエンジニアが勘違いしていますが、`
`は単なる「横線を描画するためのタグ」ではありません。HTML仕様書（WHATWG）において、`
`は「段落レベルの主題の変わり目（thematic break）」を意味します。
つまり、物語のシーンの切り替わりや、セクションの話題がガラッと変わる境界線に配置されるべきタグなのです。
しかし、現代のWebデザインではどうでしょうか？
- カードコンポーネントのヘッダーとコンテンツの境界
- リストアイテムの間に並ぶ単なる装飾的な線
これらは「話題の転換」を意味しているわけではありませんよね。単に「見た目を整えるための装飾」に過ぎません。ここが重要なポイントです。意味のない場所に置かれた`
`は、スクリーンリーダーに対して「ここで話題が変わります」という誤ったセマンティック情報を伝えてしまうのです。
ブラウザとスクリーンリーダーの「解釈」
スクリーンリーダー（NVDAやVoiceOverなど）は、`
`に遭遇すると「水平線」あるいは「区切り」と読み上げることがあります。
もし、コンテンツの至る所にこの「区切り」というアナウンスが流れてきたらどうでしょう。ユーザーは「どこが本当に重要な区切りなのか？」を判別できなくなり、情報の構造を理解するスピードが著しく低下します。
そこで登場するのが `aria-hidden=”true”` です。これを付与することで、ブラウザのアクセシビリティツリーからこの要素を「抹消」します。スクリーンリーダーは、そこに`
`が存在しないかのように振る舞うようになります。
実践：現場で使えるベストプラクティス
では、どう使い分けるのが正解か。シンプルです。
1. セマンティックな意味があるなら： `
`をそのまま使う（何も足さない）。
2. ただの装飾なら： `aria-hidden=”true”` を添える。
以下に、そのまま現場で使える実装パターンを示します。
これまでの議論は以上である。
ここからは全く別のテーマについて解説する。
タイトル
コンテンツの内容…
なぜCSSの`border`ではダメなのか？
よく「それなら`div`に`border-bottom`を当てればいいのでは？」という質問を受けます。結論から言えば、それも正解です。しかし、`
`を使うメリットは「HTML構造上、区切りであることを明示したいが、スクリーンリーダーには読み上げさせたくない」という微細なコントロールができる点にあります。
`aria-hidden=”true”` を適切に使いこなすことは、単なるアクセシビリティ対応ではありません。「情報をどこまで厳密に構造化し、どこから先をユーザー体験のためのノイズとして排除するか」という、エンジニアの設計思想が問われる部分なのです。
まとめ：次にコードを書くときへのアドバイス
明日、あなたがコンポーネントを書くとき、`
`を入れる前に一度立ち止まってこう自問してみてください。
「この線は、ユーザーが文脈を理解するために本当に必要な『区切り』か？」
もし答えが「No」なら、迷わず `aria-hidden=”true”` を追加しましょう。その小さな一行が、スクリーンリーダーユーザーにとっての情報のノイズを消し去り、Webサイトの信頼性をグッと引き上げてくれます。
アクセシビリティは、完成した後の「おまけ」ではありません。マークアップを書くその瞬間に、すでに勝負は決まっているのです。ぜひ、次のプルリクエストから意識してみてください。
コメント