【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML
これは、次の達成基準に関連する達成方法である:
H48 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、リスト要素を役割に合わせて適切に利用し、関連する項目のリストを生成することである。ol 要素は順序のあるリストに、ul 要素は順序のないリストに利用する。定義リスト (dl 要素) は、用語とその定義をまとめるのに利用する。このようなマークアップを用いることで、リストを読みやすくできるとはいえ、すべてのリストをリスト要素でマークアップする必要はない。たとえば、文章に含まれるカンマ区切りのリストを、リスト要素でマークアップする必要はない。
リストの関係を示すためではなく、見た目をリストのようにしたいためにマークアップを用いることで、利用者が情報を利用しにくくなる恐れがある。リストのような見た目にする例としては、リスト項目の最初にアスタリスクを付け、br 要素を用いて各リスト項目を分けるといったことが挙げられる。
支援技術の中には、利用者をリストからリストへ、またはリスト項目からリスト項目へと誘導する機能を備えているものがある。スタイルシートを利用すれば、リストという役割の整合性を保ったまま、提示を変更することができる。
リスト構造 (ul / ol) はハイパーリンクをグループ化するのにも役立つ。これが完了すると、スクリーンリーダーがリストの最初の項目からリストの最後までナビゲートする、または次のリストにジャンプするのに役立つ。 この選択により、リンクグループをバイパス化することができる。
訳注: WAIC では H48 に関するアクセシビリティ サポーテッド（AS）情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H48 も参照されたい。
この事例では、プロセスの連続するステップを示すために順序リスト (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 はこの達成方法が検証した環境で広く動作すると判断している。
この事例では、お店で購入する品目を順不同リスト (ul 要素) で示している。
コード例:
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
</ul>訳注: WAIC では H48-2 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H48-2 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
この事例では、用語とそれを明確にする定義をまとめるのに定義リスト (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 はこの達成方法が検証した環境で広く動作すると判断している。
この事例では、定義リストを用いて、対になる関連するアイテムをマークアップしている。対になっているアイテムは、それ自体が論理的に関連したリストである。定義リスト要素の 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;} この事例のサンプルとして、定義リストを用いた連絡先情報のサンプルがある。
この事例では、リンクが ul 要素と li 要素を用いてグループ化されている。
コード例:
<a name="categories" id="categories"></a><h2>Product Categories</h2>
<ul class="navigation">
<li><a href="kitchen.html">Kitchen</a></li>
<li><a href="bedbath.html">Bed & Bath</a></li>
<li><a href="dining.html">Fine Dining</a></li>
<li><a href="lighting.html">Lighting</a></li>
<li><a href="storage.html">Storage</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;
} この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記はそれぞれ、HTML 5.2: 4.4. Grouping content を代わりに参照できる。
リストの視覚表現 (ビュレットがあるかどうかに関わらず) を含んだコンテンツが、順序なしリストとしてマークアップされている。
番号の付いたリストの視覚表現を含んだコンテンツが、順序付きリストとしてマークアップされている。
用語及びその定義をリストという形式で表現する場合、そのコンテンツが定義リストとしてマークアップされていることを確認する。
上記全ての結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。