【入門編】ARIAロールによるリストの再定義 – HTML実践ガイド

「リストなのにリストじゃない？」HTMLのリスト構造とARIAロールの不思議な関係

こんにちは！Web制作の世界に飛び込んだ皆さん、毎日コードと向き合ってお疲れ様です。

HTMLを書き始めると、必ずと言っていいほど出会うのが `

    ` や `

  • ` といったリストタグですよね。メニューを作ったり、箇条書きを作ったり……。でも、開発の現場でたまに「あれ？これ、見た目はリストだけど、HTMLはリストじゃないタグで書いちゃった！」という場面に遭遇することがあります。

    今回は、そんな時に役立つ「ARIAロール（ARIA role）」という魔法の杖について、一緒に紐解いていきましょう。難しいことは考えすぎず、まずは身近な例えから入りますね。

    —

    そもそも、なぜ「リスト」であることを伝えないといけないの？

    例えば、スーパーマーケットのお買い物リストを想像してみてください。
    紙に「卵、牛乳、パン」とだけ書いてあるのと、「1. 卵、2. 牛乳、3. パン」と番号が振ってあるのとでは、どちらが「買い物に行く手順」として分かりやすいでしょうか？

    Webサイトも同じです。画面を見ている私たちには「ここは箇条書きだな」と直感的に分かっても、視覚障害のある方が使う「スクリーンリーダー（画面読み上げソフト）」にとっては、ただの文字の羅列に見えてしまうことがあります。

    HTMLの `

      ` や `

    • ` は、ブラウザに対して「ここはリストですよ！」という特別なラベルを貼ってくれる優秀なタグなんです。

      —

      どうしても「リストタグ」を使えない時があるんです

      でも、現場ではこんなことが起こります。
      「デザインの都合上、どうしても `

      ` タグで構成しないとCSSが効かない！」
      「JSでデータを流し込んでいるから、構造が崩れてしまった……」

      そんな時、ブラウザや読み上げソフトは「えっ、これただの箱（div）なの？ リストじゃないの？」と迷子になってしまいます。そこで登場するのが、今回の主役「ARIAロール（ARIA role）」です。

      これは「HTMLのタグは違っても、役割（ロール）だけはリストとして振る舞ってね！」と、ブラウザにそっと教えてあげるための「名札」のようなものなんです。

      —

      実際に書いてみよう：role=”list” の魔法

      例えば、`

        ` を使わずに、ただの `

        ` でリストを作ってしまった場合、以下のように書き加えるだけで、読み上げソフトには「これはリストだよ」と伝わるようになります。

        朝の準備：顔を洗う
        朝の準備：コーヒーを淹れる
        朝の準備：メールをチェックする

        ここがポイント！

        • role=”list”: 「この親要素は、リストの集合体ですよ」と教えています。
        • role=”listitem”: 「この子要素は、そのリストの中の項目ですよ」と教えています。

        これだけで、読み上げソフトは「3つの項目があるリストですね」と認識してくれるようになります。まるで、中身が中身が違っても、外側に「これはリンゴです」というシールを貼ればリンゴとして扱われるようなイメージですね。

        —

        注意：魔法はあくまで「最後の手段」

        ここで一つだけ、大切なことをお伝えしますね。
        このARIAロール、とっても便利ですが「とりあえず何でもARIAロールで解決しちゃおう！」というのは少し危険なんです。

        なぜなら、HTMLには最初から「リスト」や「ボタン」といった役割を持った、専用のタグ（`

          `, `

            `, `
スポンサーリンク

コメント

タイトルとURLをコピーしました