表示サンプル: このページの修正箇所は次のように表示されます。
HTML 及び XHTML
これは、次の達成基準に関連する実装方法である:
JAWS及びWindows-Eyesは、見出し要素を用いたナビゲーション機能を提供しており、見出しレベルに関する情報も提供している。また、Operaは、見出し要素ごとに移動できるメカニズムを提供している。他のユーザーエージェントでも、追加的なプラグインが見出し要素を用いたナビゲーション機能をサポートしている。[ここから追加] プラグインに関しては、「参考リソース」のセクションを参照のこと。[追加ここまで]
この実装方法の目的は、コンテンツの構造を伝達するために、セクションごとに見出しを指定することである。見出しのマークアップは、次のように利用されることがある。
メインコンテンツの開始位置を示す
メインコンテンツ領域にあるセクションの見出しをマークアップする
上部又はメインのナビゲーション、左側又はサブのナビゲーション、そしてフッターのナビゲーションなど、さまざまなナビゲーションを含んだセクションを区別する
視覚的に見出しのように見える画像(文字情報を含んだもの)をマークアップする
[ここから削除] いくつかのウェブコンテンツ技術において、[削除ここまで]見出しは論理的な階層を伝達することを目的としている。下位レベルの見出しを飛ばすと、文書構造がきちんと検討されなかったのではないか、又は一部の見出しが意味ではなく視覚的な表現を得るために選択されたのではないか、といった印象を与えてしまうかもしれない。したがって、コンテンツ制作者には見出しを階層的に入れ子にすることが推奨される。
見出しは、コンテンツの中の重要なセクションの開始位置を示すものであるため、支援技術のユーザーが適切な見出しまで直接ジャンプしてから、コンテンツを読み始めることができる。つまり、そのコンテンツに到達するのに時間を要していたユーザーが、見出しのマークアップによってより早く到達できるようになる。
CSSをサポートしているウェブコンテンツ技術では、スタイルを指定することによって、見出しの見た目又は読み上げを変えることができる。支援技術には見出しを提供しつつ、視覚的には非表示となるように、CSSを用いて見出しのスタイルを指定することも可能である。しかし、見出しを視覚的に見える状態にしておくことは、認知障害のある利用者を含む幅広い利用者にとって役に立つ。
この事例では、各セクションの見出しをh2
要素でマークアップすることによって、検索ページ内の複数のセクションを構成している。
コード例:
<h1>技術関連の定期刊行物の検索</h1>
<h2>検索</h2>
<form action="search.php">
<p><label for="searchInput">検索トピックスを入力:</label>
<input type="text" size="30" id="searchInput">
<input type="submit" value="検索"></p>
</form>
<h2>検索可能な定期刊行物</h2>
<div class="jlinks">
<a href="pcoder.com">プロフェッショナル・コーダー</a> |
<a href="algo.com">アルゴリズム</a> |
<a href="jse.com">ソフトウェア工学ジャーナル</a>
</div>
<h2>検索結果</h2>
……このセクションに検索結果を表示……
この事例では、ナビゲーションと主要コンテンツを知覚できるように、見出しマークアップを利用している。
コード例
<!-- ロゴ、バナー画像、検索フォームなど -->
<h2>ナビゲーション</h2>
<ul>
<li><a href="about.htm">会社概要</a></li>
<li><a href="contact.htm">お問い合わせ</a></li>
...
</ul>
<h2>見出しに関する全て</h2>
<!-- メインコンテンツを構成するテキスト、画像、その他のもの…… -->
留意すべきは、HTML 4.01及びXHTML 1.xにおいては、見出し要素はセクションの開始位置をマークアップするためだけに用いる。つまり、見出し要素はそのコンテンツとして見出し要素を含むことはない。【訳注:WCAGワーキンググループに確認中です。】
コード例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>調理技法</title>
</head>
<body>
<h1>調理技法</h1>
<p>
……ここにテキストが入ります……
</p>
<h2>油を使った調理</h2>
<p>
……このセクションのテキスト……
</p>
<h2>バターを使った調理</h2>
<p>
……このセクションのテキスト……
</p>
</body>
</html>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
Pick a Heading Eric Meyer
Firefoxでは、以下のプラグインがキーボード操作による見出しナビゲーション機能を提供している:
[追加ここまで]複数のセクションに分けられているコンテンツ全てに対して:
各セクションの開始位置に、見出し要素でマークアップされた見出しがある。
1.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。