箇条書きリスト（アクセシビリティ）

箇条書きをテキストで表現せず、箇条書きリストを使う

テキストを駆使して箇条書きを再現するような表現は避け、箇条書きリストを使用してください。

• テキストの中黒（・）をマーカーとして箇条書きを表現する
• 項番とテキストを並べ、1行ごとに改行することで項番付き箇条書きを表現する
• スペース文字でインデントする

リストコンポーネントを使用した場合、スクリーンリーダーはリスト内にカーソルが入ったときにリストの項目数を先に読み上げます。また、スクリーンリーダーのジャンプ機能を使ってページ内のリストに直接ジャンプすることが可能になります。

<ol>要素は使わず、<ul>要素として実装する

<ol>要素を使用した場合、ブラウザは<ol>要素の項番をコンテンツとして扱わず、装飾として表現します。そのため、以下のような制約が生じます。

• 表示されている数字をコピーできない
• 項目自体に対して固有の項番にすることができない
• ユーザースタイルシートで上書きされたり、非表示になったりする可能性がある
• list-style-typeでは表現できない項番フォーマットがある

そのため、<ol>要素を使おうとすると、以下のような公文書として致命的な問題が生じます。

• リストの一部だけが<ol>要素になっていたため、リスト全体をコピーしたときに項番の漏れ抜けが起きてしまった
• 項目の順序を変えたり、項目の追加削除をしたりした場合に、気付かないうちに意図せず項番が変化してしまった
• <ol>要素の装飾数字をCSSで視覚的に非表示にし、テキストとして数字を記載したが、スクリーンリーダーではどちらの数字も読み上げてしまった
• <ol>要素の装飾数字をlist-style-type: noneで非表示にし、テキストとして数字を記載したが、CSSがオフの状態のときに両方とも表示されてしまった
• 正確な表現が必要な利用規約の項番を、<ol>要素を使おうとしてlist-style-typeで表現できるように変えてしまった

リストの実装には<ul>要素を使用し、項番は<li>要素内にテキストとして直接記載してください。なお、同様の理由からCSSのカウンターによる項番も使用しないでください。

適切な入れ子としてマークアップする

以下のようなマークアップの場合、視覚的なインデントは意図通りになるかもしれません。しかし、正しく入れ子になっていないため、スクリーンリーダーで入れ子の構造が理解できなくなります。

<ul>
  <li>親項目A</li>
  <li>親項目B</li>
</ul>
<ul>
  <li>
    <ul>
      <li>子項目X</li>
      <li>子項目Y</li>
    </ul>
  </li>
</ul>

箇条書きリストを入れ子にする場合は以下のように正しくマークアップしてください。

<ul>
  <li>親項目A</li>
  <li>親項目B
    <ul>
      <li>子項目X</li>
      <li>子項目Y</li>
    </ul>
  </li>
</ul>