順序付きリスト [文書構造]
順序付きリストは、見た目だけではなく、順序付きリストを<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 適応可能のガイドライン」
何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。