リスト又はリンクのグループに、ol 要素、ul 要素、dl 要素を用いる

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす手段として十分) に関する達成方法である。

解説

この達成方法の目的は、目的に適したリスト要素を使用して、関連する項目のリストを生成することである。ol 要素は順序のあるリストに、ul 要素は順序のないリストに利用する。定義リスト (dl 要素) は、用語とその定義をまとめるのに利用する。このようなマークアップを用いることで、リストを読みやすくできるとはいえ、すべてのリストをリスト要素でマークアップする必要はない。たとえば、文章に含まれるカンマ区切りのリストを、リスト要素でマークアップする必要はない。

リストの関係を示すためではなく、見た目をリストのようにしたいためにマークアップを用いることで、利用者が情報を利用しにくくなる恐れがある。リストのような見た目にする例としては、リスト項目の最初にアスタリスクを付け、br 要素を用いて各リスト項目を分けるといったことが挙げられる。

支援技術の中には、利用者をリストからリストへ、またはリスト項目からリスト項目へと誘導する機能を備えているものがある。スタイルシートを利用すれば、リストの整合性を保ったまま、提示を変更することができる。

リスト構造 (ul / ol) はハイパーリンクをグループ化するのにも役立つ。これが完了すると、スクリーンリーダーがリストの最初の項目からリストの最後までナビゲートする、または次のリストにジャンプするのに役立つ。 この選択により、リンクグループをバイパス化することができる。

訳注:

WAIC では H48 に関するアクセシビリティ サポーテッド(AS)情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H48 も参照されたい。

事例

事例 1: 連続するステップを示すリスト

この事例では、プロセスの連続するステップを示すために順序リスト (ol 要素) を利用している。

 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>
訳注:

WAIC では H48-1 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H48-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

事例 2: 材料のリスト

この事例では、お店で購入する品目を順不同リスト (ul 要素) で示している。

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>
訳注:

WAIC では H48-2 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H48-2 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

事例 3: 言葉とその定義

この事例では、用語とそれを明確にする定義をまとめるのに定義リスト (dl 要素) を利用している。

<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl> 
訳注:

WAIC では H48-3 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H48-3 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

事例 4: 定義リストを用いた連絡先情報

この事例では、定義リストを用いて、対になる関連するアイテムをマークアップしている。対になっているアイテムは、それ自体が論理的に関連したリストである。定義リスト要素の CSS スタイルはブラウザによるサポートが十分ではないため、スタイル目的のためだけに span 要素がマークアップに含められているが、これは必須ではない。

<dl>
<dt><span>name:</span></dt><dd><span>John Doe</span></dd>
<dt><span>tel:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>fax:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>email:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>

以下の CSS スタイルは、対になっているアイテムそれぞれをテーブルのようなレイアウトにして 1 行に並べるために用いることが可能である。

dt, dd{float: left;margin: 0;padding: 0;}
dt{clear:both;font-weight: bold}
dt span{display: inline-block; width: 70px;}
dd span{display: inline-block; margin-right: 5px;}

この事例のサンプルとして、定義リストを用いた連絡先情報のサンプルがある。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注:

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML Standard: 4.4 Grouping content を代わりに参照できる。

検証

手順

  1. リストの視覚表現 (ビュレットがあるかどうかに関わらず) を含んだコンテンツが、順序なしリストとしてマークアップされている。
  2. 番号の付いたリストの視覚表現を含んだコンテンツが、順序付きリストとしてマークアップされている。
  3. 用語及びその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされていることを確認する。

期待される結果

  • 上記全ての結果が真である。