WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H48: リストに、ol 要素、ul 要素、dl 要素を用いる

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

H48 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

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

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

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

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

事例

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

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

コード例:

<ol>
  <li>卵と牛乳をボールの中で混ぜる。</li>
  <li>塩とコショウを加える。</li>
</ol>

事例 2: 材料のリスト

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

コード例:

<ul>
  <li>牛乳</li>
  <li>卵</li>
  <li>バター</li>
</ul>

事例 3: 言葉とその定義

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

コード例:

><dl>
  <dt>点滅</dt>
  <dd>1 秒当たり 0.5 回から 3 回、ついたり消えたりすること
  </dd>
</dl>

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

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

<dl>
<dt><span>名前:</span></dt><dd><span>John Doe</span></dd>
<dt><span>電話番号:</span></dt><dd><span>01-2345678</span></dd>
<dt><span>FAX:</span></dt><dd><span>02-3456789</span></dd>
<dt><span>Eメール:</span></dt><dd><span>johndoe@someemail.com</span></dd>
</dl>

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

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;} 

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

事例 5: リストを用いてリンクをグループ化する

この事例では、リンクが ul 要素と li 要素を用いてグループ化されている。

コード例:

<a name="categories" id="categories"></a><h2>製品カテゴリ</h2>
<ul class="navigation">
    <li><a href="kitchen.html">キッチン</a></li>
    <li><a href="bedbath.html">ベッド&amp;amp; Bath</a></li>
    <li><a href="dining.html">ダイニング</a></li>
    <li><a href="lighting.html">照明</a></li>
    <li><a href="storage.html">収納</a><li>
</ul> 

リスト要素のスタイルを指定するのに CSS を使用することが可能で、この達成方法はさまざまなビジュアルデザインで用いることができる。

この CSS では、リストのビュレットとインデントする左側の余白を削除して、各リスト要素を水平に並べている。

コード例:

ul.navigation {
  list-style: none; 
  padding: 0;
}
ul.navigation li {
  display: inline;
}

このスタイルは、リストのビュレットと左側の余白を削除し、リスト項目を横並びのブロックにして表示する。

コード例:

ul.navigation {
 list-style: none; 
 padding: 0;
}
ul.navigation li {
 display: block; 
 float: left;
} 

参考リソース

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

検証

チェックポイント

  1. リストの視覚表現(ビュレットがあるかどうかに関わらず)を含んだコンテンツが、順不同リストとしてマークアップされている。

  2. 番号の付いたリストの視覚表現を含んだコンテンツが、順序リストとしてマークアップされている。

  3. 用語とその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。