【入門編】装飾目的のリストとARIAの非表示設定 – HTML実践ガイド

はい、承知いたしました！Web制作の現場で実際に役立つ、親しみやすくも深い洞察に満ちたブログ記事を執筆します。読者の皆さんが「なるほど！」と膝を打つような、実践的な知識と温かいフォローをお届けしますね。

—

【HTML】ナビゲーションの裏技？リストを「見せる」けど「読ませない」秘密のテクニック！ARIAの魔法を解き明かそう✨

Webサイトを作っていると、「あれ？このカッコいいメニュー、どうやって作ってるんだろう？」って思うこと、ありますよね。今回は、そんな見た目はバッチリなのに、実はスクリーンリーダー（視覚障がいのある方が音声でWebサイトの内容を理解するためのツール）には「これはリストじゃないよ」ってこっそり伝える、ちょっとした裏技をご紹介します。

「え、リストって、ただの箇条書きじゃないの？」って思われた方も大丈夫！実はHTMLのリスト（`

なぜリストを「見せたい」のに「読ませたくない」の？🤔

例えば、Webサイトのヘッダーにあるナビゲーションメニュー。あれって、見た目はすごくおしゃれで、アイコンがあったり、ちょっとした装飾があったりしますよね。でも、その裏側を覗いてみると、実はHTMLではリストタグ（`

`）を使ってきれいに整理されていることが多いんです。
これは、
1. 分かりやすい構造を作るため: 「このメニュー項目は、このグループに属しているんだよ」という関係性を明確にするため。
2. SEO（検索エンジン最適化）のため: 検索エンジンに、サイトの構造を理解してもらいやすくするため。
3. アクセシビリティ（利用しやすさ）のため: スクリーンリーダーが、メニュー項目を順番に読み上げてくれるようにするため。

…と、たくさんの良いことがあるからなんです。

でも、ここでちょっとした「？」。
「リストとして構造を整えたい。でも、スクリーンリーダーが『リスト、リスト、リスト…』って、同じようなことを何度も言っちゃうと、ユーザーさんはちょっと大変かも？」

そうなんです。特に、見た目を重視したデザインで、アイコンがメインだったり、ちょっとした装飾が多かったりすると、スクリーンリーダーが「これはリストです。項目1。項目2…」と読み上げると、情報が重複してしまったり、かえって分かりにくくなってしまうことがあるんです。

そこで登場するのが、今日の主役、ARIAの出番です！

ARIAって、いったい何者？〜Webサイトの「お医者さん」みたいなもの〜 stethoscope

ARIA（Accessible Rich Internet Applications）というのは、Webサイトをより多くの人が使いやすくするための、いわば「お医者さん」みたいなものです。特に、JavaScriptを使って動的に変化するWebサイトや、複雑な操作が必要なWebアプリケーションなどで、HTMLだけでは伝えきれない情報を、スクリーンリーダーなどの支援技術に伝える役割を持っています。

今回は、そのARIAの中でも「`aria-hidden`」という属性に注目します。

`aria-hidden=”true”` と指定すると、その要素（と、その中にある全ての要素）は、スクリーンリーダーなどの支援技術から「見えないもの」として扱われます。でも、ブラウザで見た目にはちゃんと表示されるんです。これが、今回の「見せるけど読ませない」の秘密なんです！

さあ、実践してみよう！〜ナビゲーションメニューを例に〜 🛒

例えば、こんなナビゲーションメニューがあるとしましょう。
これは、HTMLのリストタグを使って、きれいに構造化されています。スクリーンリーダーも「ホーム、私たちについて、サービス、お問い合わせ」と、ちゃんと読み上げてくれるはずです。

でも、もしこのメニューに、見た目を良くするために、各項目の横に小さくておしゃれなアイコンを付けたとします。そして、そのアイコンには、スクリーンリーダーに「これは何かのアイコンですよ」という説明（例えば `alt` 属性とか）が付いていて、さらにメニュー項目自体も読み上げられると、ちょっと情報が過剰になるかもしれません。

そこで、アイコンの要素に `aria-hidden=”true”` をこっそり仕込んでみましょう！
どうでしょう？ `` タグに `aria-hidden=”true”` を付けたことで、
- 見た目: ブラウザでは、アイコンも文字も、今まで通りちゃんと表示されます。
- スクリーンリーダー: アイコンは「見えないもの」として扱われるので、読み上げの対象から外れます。「ホーム」「私たちについて」という、本来のリンクテキストだけが、リストの項目として読み上げられるようになります。
これにより、情報が整理され、ユーザーはよりスムーズにメニューを理解できるようになるんです。まるで、お店で「この商品は○○です」って店員さんが説明してくれるけど、商品の横に貼ってある注意書きの小さな文字は、わざわざ読まなくてもいい、みたいなイメージでしょうか？（ちょっと違うかも？😅）

どこで使うのが効果的？〜応用編〜 💡

この `aria-hidden=”true”` は、ナビゲーションメニュー以外にも、色々な場面で応用できます。
- 装飾的なアイコン: ボタンやリンクの横にある、意味を持たない装飾用のアイコン。
- 視覚的な区切り線: 本来、構造的な意味を持たない、見た目のための線。
- 一時的に非表示にしたい要素: JavaScriptで表示・非表示を切り替えるけど、スクリーンリーダーには常に「見えている」状態にしておきたい場合（ただし、これは注意が必要！）。
【注意点】
`aria-hidden=”true”` は、あくまで「支援技術から隠す」ためのものです。本来、その要素が持っている意味や情報を、スクリーンリーダーユーザーに伝えたい場合は、絶対に付けないでくださいね！例えば、写真に写っている内容を説明する `alt` 属性に `aria-hidden=”true”` を付けるのはNGです。

まとめ〜Web制作は、みんなに優しく〜 💖

今回は、HTMLのリスト構造と、ARIAの `aria-hidden` 属性を使って、Webサイトのアクセシビリティを向上させるテクニックをご紹介しました。

「リスト構造は大切にしたいけど、見た目のデザインとのバランスも取りたい…」
そんな時に、この `aria-hidden=”true”` が、そっと手を差し伸べてくれるんです。

Web制作は、見た目の美しさだけでなく、誰にとっても使いやすい、優しいものであることが大切です。今回ご紹介したテクニックも、ぜひあなたのWeb制作に取り入れてみてくださいね。きっと、より多くの方に喜ばれるWebサイトが作れるはずです！

もし「ここ、どういうこと？」って疑問に思ったことがあれば、いつでも気軽に質問してくださいね！一緒にWeb制作を楽しみましょう！😊