順序付きリスト　［文書構造］

順序付きリストは、見た目だけではなく、順序付きリストを<ol>、<li>要素を用いてマークアップしているか

解説

「順序付きリスト」というのは、各項目に決まった順序があり、その順序を数字（1. 2. 3. …）やアルファベット（a. b. c. …）などで示しているリストのことをいいます。

同じリストでも、各項目に決まった順序がない場合は、各項目の冒頭に右向きの三角印や黒丸などの記号（ビュレット）が付いたリストを用います。このガイドラインでは、そういったリストを「順不同リスト」として区別しています。

順序付きリストを用いる場合、ブラウザや支援技術などのユーザーエージェントが解釈できるように、その順序付きリスト全体に<ol>要素、各リスト項目には<li>要素を用いてマークアップします。そうすることによって、順序付きリストがマシンリーダブルになります。リスト項目に順序がある場合は、<ul>要素ではなく、<ol>要素を用いてください。

リストがマークアップによってマシンリーダブルになることで、次のようなメリットをユーザーに提供することができるようになります。

  • スクリーンリーダーがチューターメッセージ（補足説明）を提供する
    • <li>要素のリスト項目の数に応じて、リスト部分を読み上げる前に「リスト5項目」というような補足説明をする
  • スクリーンリーダーのショートカットキーを使用して、次のリストの開始位置や次のリスト項目へ移動することができる

また、Webユーザビリティの研究においては、文章中に4つ以上の項目が並んでいる場合には、リスト項目を用いたほうがよいとされています。なぜなら、リスト項目を用いることによって、メインコンテンツの右側が余白になりやすくなり、ユーザーの視線の動きが左側に固定されるため、各リスト項目の内容が目立ちやすくなるからです。通常の文章よりもユーザビリティが47%も高いという調査結果もあります。

事例 1. 順序付きリストのマークアップ

悪い例


<p>

1. Webサイトの「アクセシビリティ方針」を文書化する<br>

2. 方針で定めた対象範囲で対応を進める<br>

3. 試験を実施する<br>

4. 試験結果を公開した上で、次のステップに向けて方針を見直す<br>

</p>

見た目には順序付きリストだが、リスト項目の数字をテキストで入力して、リスト項目ごとに改行しているだけなので、ユーザーエージェントには順序付きリストであることが分からない。

良い例


<ol>

<li>Webサイトの「アクセシビリティ方針」を文書化する</li>

<li>方針で定めた対象範囲で対応を進める</li>

<li>試験を実施する</li>

<li>試験結果を公開した上で、次のステップに向けて方針を見直す<</li>

</ol>

見た目だけではなく、<ol>要素と<li>要素を用いて、順序付きリストとしてマークアップしている。

『JIS X 8341-3:2016 / WCAG 2.0』の達成基準

1.3.1 情報及び関係性の達成基準（レベル A）
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

JIS X 8341-3:2016 / WCAG 2.0「1.3 適応可能のガイドライン」

参考