このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

HTML 及び XHTML

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

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

番号やビュレットの形式を指定するtype属性について、支援技術のサポートが一致していない。

解説

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

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

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

事例

事例 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; 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. 用語とその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされている。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。