【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML
これは、次の達成基準に関連する達成方法である:
H69 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、コンテンツの構造を伝達するために、セクションごとに見出しを指定することである。見出しのマークアップは、次のように利用されることがある。
メインコンテンツの開始位置を示す
メインコンテンツ領域にあるセクションの見出しをマークアップする
上部又はメインのナビゲーション、左側又はサブのナビゲーション、そしてフッターのナビゲーションなど、さまざまなナビゲーションを含んだセクションを区別する
見出しとして用いられる文字画像をマークアップする
セクションによって利用者がページをナビゲートできるように、または、繰り返される情報のブロックをスキップできるようにする
見出しは論理的な階層を伝えるためにデザインされている。見出しの階層の中のレベルを飛ばすと、文書構造がきちんと検討されなかったのではないか、又は一部の見出しが意味ではなく視覚的な表現を得るために選択されたのではないか、といった印象を与えてしまうかもしれない。著者には見出しを階層的に入れ子にすることが推奨される。見出しが階層的である場合、もっとも重要な情報には最も高い論理レベルが与えられ、下位のセクションにはその後の論理レベルが与えられる (すなわち、h2 は h1 の下位セクションである)。このような種類の見出しを与えることは、コンテンツの全体的な構成を、利用者がより簡単に理解することに役立つ。
見出しは、コンテンツの中の重要なセクションの開始位置を示すものであるため、支援技術のユーザーが適切な見出しまで直接ジャンプしてから、コンテンツを読み始めることができる。これにより、他の方法でそのコンテンツに到達するのに時間を要していた利用者のインタラクションが大幅に速くなる。見出しによって、スクリーンリーダ―を利用する全盲の人や、情報のグループを作る支援技術を利用する認知的な障害のある人、あるいは、コミュニケーション障害や読書のときにスクリーンリーダ―に支援される文盲の人のような、障害者がより簡単に見つけられる情報の塊を作ることができる。
注記: 全ての達成方法は、特別なユーザエージェント (支援技術や特別なプラグインを含む) を必要とする人たちが入手でき、そうした種類のユーザエージェント (例えば、スクリーンリーダ―、あるいは適切にマークアップされたコンテンツのナビゲーションにキーボードが使えるようにするプラグインなど) を利用できることを仮定している。
訳注: WAIC では H69 に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H69 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。
訳注: WAIC では H69 に関するアクセシビリティ サポーテッド（AS）情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H69 も参照されたい。
この事例では、各セクションの見出しを h2 要素でマークアップすることによって、検索ページ内の複数のセクションを構成している。
コード例:
<h1>Search Technical Periodicals</h1>
<h2>Search</h2>
<form action="search.php">
<p><label for="searchInput">Enter search topic: </label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="Go"></p>
</form>
<h2>Available Periodicals</h2>
<div class="jlinks">
<a href="pcoder.com">Professional Coder</a> |
<a href="algo.com">Algorithms</a> |
<a href="jse.com">Journal of Software Engineering</a>
</div>
<h2>Search Results</h2>
... search results are returned in this section ... この事例では、ナビゲーションとメインコンテンツを知覚できるように、見出しマークアップを利用している。
コード例:
<!-- ロゴ、バナー画像、検索フォームなど -->
<h2>Navigation</h2>
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
...
</ul>
<h2>All about headings</h2>
<!-- メインコンテンツを構成するテキスト、画像、その他のもの…… -->HTML 4.01 及び XHTML 1.x において、見出し要素はセクションの先頭をマークするだけであることに注意すること。見出し要素をセクションコンテンツに明示的に関連付けるためのマークアップが存在しないため、次の見出し要素が出現するまで、見出しは後に続くすべてのコンテンツに適用されると見なされる。
コード例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cooking techniques</title>
</head>
<body>
<h1>Cooking techniques</h1>
<p>
... some text here ...
</p>
<h2>Cooking with oil</h2>
<p>
... text of the section ...
</p>
<h2>Cooking with butter</h2>
<p>
... text of the section ...
</p>
</body>
</html> この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
Pick a Heading Eric Meyer
Firefox では、以下のプラグインがキーボード操作による見出しナビゲーション機能を提供している:
訳注: 「Accessibility Evaluation Toolbar」は 2018 年現在、最新の Firefox と互換性がないためにインストールできない。
コンテンツが別々のセクションに分けられていることを確認する
そのページの各セクションが見出しで始まることを確認する
達成基準 2.4.1 の場合、2 の結果が真であることをを確認する。
達成基準 2.4.10 の場合、1 及び 2 の結果が真であることを確認する。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。