順不同リスト　［文書構造］

順不同リストは、見た目だけではなく、順不同のリストを<ul>、<li>要素を用いてマークアップする

解説

「順不同リスト」というのは、いわゆる箇条書きのことで、各項目の冒頭に右向きの三角印や黒丸などの記号（ビュレット）が付いていることが多く、項目間に決まった順序はありません。

同じリストでも、各項目に決まった順序がある場合は、各行の頭に「1」や「a」などの数字やアルファベットなどが付いたリストを用います。このガイドラインでは、そういったリストを「順序付きリスト」として区別しています。

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

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

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

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

事例 1. 順不同リストのマークアップ

悪い例


<p>

●W3C勧告『WCAG 2.0』<br>

●国際規格『ISO/IEC 40500:2012』<br>

●JIS規格『JIS X 8341-3:2016』<br>

●韓国のガイドライン『KWCAG 2.1』<br>

</p>

見た目には順不同リストのように見えるが、HTMLソースではリストの各項目の先頭にある「●」がテキストで、リスト項目ごとに改行しているだけである。順不同リストであることがマシンリーダブルではないので、ブラウザや支援技術などのユーザーエージェントにとっては、ただのテキストでしかない。

良い例


<ul>

<li>W3C勧告『WCAG 2.0』</li>

<li>国際規格『ISO/IEC 40500:2012』</li>

<li>JIS規格『JIS X 8341-3:2016』</li>

<li>韓国のガイドライン『KWCAG 2.1』<</li>

</ul>

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

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

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

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

参考