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

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

WCAG 2.0 実装方法集

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

-

H69: コンテンツの各セクションの開始位置に見出し要素を提供する

適用(対象)

HTML 及び XHTML

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

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

JAWS及びWindows-Eyesは、見出し要素を用いたナビゲーション機能を提供しており、見出しレベルに関する情報も提供している。また、Operaは、見出し要素ごとに移動できるメカニズムを提供している。他のユーザーエージェントでも、追加的なプラグインが見出し要素を用いたナビゲーション機能をサポートしている。[ここから追加] プラグインに関しては、「参考リソース」のセクションを参照のこと。[追加ここまで]

解説

この実装方法の目的は、コンテンツの構造を伝達するために、セクションごとに見出しを指定することである。見出しのマークアップは、次のように利用されることがある。

[ここから削除] いくつかのウェブコンテンツ技術において、[削除ここまで]見出しは論理的な階層を伝達することを目的としている。下位レベルの見出しを飛ばすと、文書構造がきちんと検討されなかったのではないか、又は一部の見出しが意味ではなく視覚的な表現を得るために選択されたのではないか、といった印象を与えてしまうかもしれない。したがって、コンテンツ制作者には見出しを階層的に入れ子にすることが推奨される。

見出しは、コンテンツの中の重要なセクションの開始位置を示すものであるため、支援技術のユーザーが適切な見出しまで直接ジャンプしてから、コンテンツを読み始めることができる。つまり、そのコンテンツに到達するのに時間を要していたユーザーが、見出しのマークアップによってより早く到達できるようになる。

CSSをサポートしているウェブコンテンツ技術では、スタイルを指定することによって、見出しの見た目又は読み上げを変えることができる。支援技術には見出しを提供しつつ、視覚的には非表示となるように、CSSを用いて見出しのスタイルを指定することも可能である。しかし、見出しを視覚的に見える状態にしておくことは、認知障害のある利用者を含む幅広い利用者にとって役に立つ。

事例

事例 1

この事例では、各セクションの見出しを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>
 ……このセクションに検索結果を表示……   

事例 2:コンテンツ全体の構成を示している見出し

この事例では、ナビゲーションと主要コンテンツを知覚できるように、見出しマークアップを利用している。

コード例

<!-- ロゴ、バナー画像、検索フォームなど  -->
  <h2>ナビゲーション</h2>
    <ul>
      <li><a href="about.htm">会社概要</a></li>
      <li><a href="contact.htm">お問い合わせ</a></li>
       ...
    </ul>
  <h2>見出しに関する全て</h2>
   <!-- メインコンテンツを構成するテキスト、画像、その他のもの…… --> 
            

事例 3:メインコンテンツ部分にあるコンテンツの構成を示している見出し

留意すべきは、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>    

参考リソース

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

検証

チェックポイント

複数のセクションに分けられているコンテンツ全てに対して:

  1. 各セクションの開始位置に、見出し要素でマークアップされた見出しがある。

判定基準

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

日本語訳における注記:

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