こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
皆さんは、Webサイトで「リスト」を作るとき、どんなことを意識していますか？「とりあえず`
- `の中に`
- `を入れればOKでしょ？」と思っているそこのあなた。実は、そこが「アクセシビリティ」という、Web制作のちょっと深い沼への入り口なんです。
今日は、リストの中にリストを入れ子にする「ネストされたリスト」について、スクリーンリーダー（視覚障害のある方がWebサイトを読むための音声読み上げソフト）の視点から、分かりやすく紐解いていこうと思います。
—
リストの「階層」は、お買い物の目次と同じ
いきなりですが、スーパーでのお買い物を想像してみてください。
- 食品コーナー
- 野菜
- お肉
- 日用品コーナー
- 洗剤
- トイレットペーパー
この「大枠があって、その中に細かい分類がある」という構造。これをHTMLで表現するとき、私たちは`
- `の中に別の`
- 食品コーナー
- 野菜
- お肉
- 日用品コーナー
- 洗剤
- `role=”list”`: 「これはリストの集まりですよ」と宣言。
- `aria-level=”2″`: 「ここは2階層目のリストですよ」と明示。
- `を正しく使っていれば、ブラウザが勝手に「これは2階層目ですね」と読み上げてくれます。わざわざ `aria-level` を自分で書く必要はありません。
「HTMLのタグだけで表現できるなら、それが一番のアクセシビリティ」
これが、現場で先輩たちが口を揃えて言う鉄則です。ARIAは、HTMLタグだけではどうしても表現できない複雑なUI（例えば、クリックすると開閉するアコーディオンメニューなど）のために取っておく「切り札」だと思ってください。
—
最後に：完璧を目指さなくて大丈夫！
最初は「アクセシビリティ？難しそう……」と感じるかもしれませんが、大丈夫です。まずは「誰が使っても迷わない構造になっているかな？」と、自分の書いたリストを眺めてみることから始めてみてください。
「このリスト、もし目が見えなかったらどう聞こえるだろう？」
そう想像するだけで、あなたの書くコードはぐんと優しく、プロフェッショナルなものに変わります。焦らず、少しずつ一緒に学んでいきましょうね！
また次の記事でお会いしましょう！
- `を入れ子にしますよね。
視覚的に見れば「インデント（字下げ）」されているので、誰がどう見ても階層構造だと分かります。でも、目が見えない方や、スクリーンリーダーを使っている方にとって、この階層は「ただの連続したリスト」として聞こえてしまうことがあるんです。
「あれ、今どこの話をしてるんだっけ？」と迷子にならないように、HTMLの構造を正しく伝える工夫が必要なんですね。
—
「ネスト」の正しい書き方と落とし穴
まずは、基本のコードを見てみましょう。
実はこれ、HTMLとしてはこれで100点満点なんです。ブラウザやスクリーンリーダーは、この構造を見て「あ、このリストは『食品コーナー』という親の中に属しているんだな」と自動的に理解してくれます。
なぜARIAの出番が来るの？
「じゃあ何が問題なの？」と思いますよね。
実は、デザインの都合で「HTMLのリストタグ（`ul`や`ol`）を使わずに、`div`や`span`でリストっぽい見た目を作ってしまう」ケースが、現場では非常によくあります。そんな時、ブラウザに「これはリストだよ！」と教えてあげるのがARIA（アリア）という魔法の杖なんです。
—
aria-levelで「階層の深さ」を教えてあげよう
もし、`div`タグなどで無理やりリストを作ってしまった場合、スクリーンリーダーは階層を認識できません。ここで登場するのが `role=”list”`（リストですよ！）と `aria-level`（これは何階層目ですよ！）という属性です。
食品コーナー
野菜お肉ポイント:
こうすることで、読み上げソフトを使っているユーザーさんは、「あ、今、深い階層に入ったんだな」と直感的に理解できるようになるんです。
—
現場からのアドバイス：一番大切なこと
ここまで読んで「なるほど！aria-levelをたくさん使えばいいんだ！」と思った方、ちょっと待ってくださいね。
実は、フロントエンドの世界で一番大切なのは「無理にARIAを使わないこと」なんです。
先ほどのコードのように、`
- `と`
コメント