要約

ユーザーが簡単にナビゲートできるように、項目のリストを適切にタグ付けします。

テクニック

• 順序を変更するとリストの意味が変わってしまうリストには、ol要素を使用します。[[WCAG-1.3.1]]

• デフォルトの順序をリストの意味を変えずに変更できるリストにはul要素を使用します。[[WCAG-1.3.1]]

• 用語と定義のグループにはdl要素を使用します。[[WCAG-1.3.1]]

• aria-labelledby属性を使用してリストヘッダーを識別します。[[WCAG-1.3.1]]

例

<ul>
   <li>Credit, consumer, 164</li>
   <li>Cross-functional contact, 10-11</li>
   <li>Culture
     <ul>
       <li>buyer behavior and, 85</li>
       <li>defined, 85, 98, 118</li>
       …
     </ul>
   </li>
   …
</ul>

<div class="list-hd" id="race-hd">Race Result</div>
<ol aria-labelledby="race-hd">
   <li>Flash Gordon</li>
   <li>The Flash</li>
   …
</ol>

<dl>
   <dt><dfn>Exchange function</dfn></dt>
   <dd>
     Sales of the product to the various members 
     of the channel of distribution.
   </dd>
   <dt><dfn>Physical distribution function</dfn></dt>
   <dd>
     Moves the product through the exchange 
     channel, along with title and ownership.
   </dd>
   <dt><dfn>Marketing channel</dfn></dt>
   <dd>
     Sets of independent organizations involved
     in the process of making a product or 
     service available for use or consumption 
     as well as providing a payment mechanism 
     for the provider.
   </dd>
   …
</dl>

よくある質問

リスト項目に段落やdiv を使用できないのはなぜですか？

段落やdivを使用すると、支援技術を使用してドキュメント内を移動するユーザーは、読み続けるためにすべての項目を１つずつ移動する必要があります。リストを適切に使用すると、ユーザーはリスト全体を簡単にスキップし、いつでもリスト内を移動してリストから抜けることができます。

また、段落を使用すると、インデントはCSSを使用してエミュレートされるため、通常は階層関係が失なわれてしまいます。

さらに、適切なリストを作成すると、ユーザーエージェントはリスト内の項目の合計数と、ユーザーがナビゲートする際の現在の位置をアナウンスできるため、必要に応じて再度場所を参照することが容易になります。

リストを作成するのにbrタグを使用できないのはなぜですか？

印刷優先のツールはしばしばこのようなリストを生成します（たいていは不適切な書式設定から）。リスト全体が１つの段落で表現され、各項目は強制改行（ brタグ）で区切られます。これにより、リストをすばやくスキップしたり、リストから抜け出したりできるという問題は解決されているように見えますが、リストを項目ごとにすばやくナビゲートできなくなります。ユーザーは、すべての項目を順番に聞かなければいけなくなります。

また、brタグを使用すると、後でテキストに戻る方法がないので、コンテンツをもう一度初めから聞かなければならず、特定の項目に戻るのが難しくなります。

箇条書きの行頭文字にカスタム画像を使用したいのですが、ルールは無視しても良いですか？

いいえ、前述のすべての理由に加えて、CSSではimg要素に頼ることなく、リスト項目にカスタム画像を定義できます。CSS のlist-style-imageプロパティを参照してください。

解説

リストはアクセシビリティ機能として見落とされがちですが、データポイントの長いリストをすばやく効果的に移動する機能は、読む上で重要な要件です。残念ながら、リストは適切なHTMLとしてレンダリングされないままになっています（たとえば、各項目に新しい段落を使用する、エントリを区切るために手動で改行を使用するなど）。

目が見えるユーザーは、リストをざっと読み、興味のあるものかどうかを判断したり、項目を選択して読んだりできる利点にほとんど気づきません。ユーザーがリストの最後まで行き着くためにリスト内のすべての項目を１つずつ辿ったり、リスト全体を最初から最後まで聞いたりする必要がある場合、不適切なマークアップの問題はより顕著になります（問題の詳細な説明についてはFAQセクションを参照してください）。リストに適切なタグを付けることはちょっとした対策ですが、ユーザーのフラストレーションを大幅に軽減できるでしょう。

リストのナビゲーションを容易にするために、適切な順序付き（ol）または順序なし（ul）リスト要素を使用して、セット内の項目すべてにタグを付けます。ナビゲーションの妨げになるので、項目を別々の行に視覚的にレンダリングするためにbrタグを使用したり、リストの視覚的な表現のために同じようなスタイリングのトリックを使用したりしないでください。

正しいリストタイプを使用することも重要です。これは、項目の順序が重要であるかどうかをユーザーに示す唯一の手がかりになる可能性があるためです。たとえば、アルファベット順のリストは必ずしも順序付きリストであるとは限りません。項目を並べ替えることは、特定の順序を割り当てることと同じではありません。リストの意味を変えずに項目を並べ替えることができる場合は、順序なしリストを定義したことになります（たとえば、索引や参考文献は並べ替えても意味が失われません）。

定義リスト（dl）要素は、名前／値リスト用です。これらには、辞書、用語集、よくある質問などが含まれます。HTML5仕様で述べられているように、この要素はキャラクターの会話には使用しないでください。誰が話しているかを示すためだけにdt要素でキャラクター名を繰り返すと、このセマンティクスが崩れます。リストタイプに付属する自動フォーマットは、演劇などの特定の形式に適合する場合がありますが、各dt要素は一意の値を定義することを目的としています。

リスト要素は、純粋なプレゼンテーション目的には使用しないでください（例：dlリストを使用して、インデントされた段落を持つ太字の見出しを作成するなど）。

関連リンク

• MDN — <ol>: 順序付きリスト要素
• MDN — <ul>: 順序なしリスト要素
• MDN — <dl>: 定義リスト要素
• HTML — ol要素
• HTML — ul要素
• HTML — dl要素