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

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

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

解説

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

見出しは論理的な階層を伝えるためにデザインされている。見出しの階層の中のレベルを飛ばすと、文書構造がきちんと検討されなかったのではないか、又は一部の見出しが意味ではなく視覚的な表現を得るために選択されたのではないか、といった印象を与えてしまうかもしれない。コンテンツ制作者には見出しを階層的に入れ子にすることが推奨される。見出しが階層的である場合、もっとも重要な情報には最も高い論理レベルが与えられ、下位のセクションにはその後の論理レベルが与えられる (すなわち、h2 は h1 の下位セクションである)。このような種類の見出しを与えることは、コンテンツの全体的な構成を、利用者がより簡単に理解することに役立つ。

見出しは、コンテンツの中の重要なセクションの開始位置を示すものであるため、支援技術のユーザーが適切な見出しまで直接ジャンプしてから、コンテンツを読み始めることができる。これにより、他の方法でそのコンテンツに到達するのに時間を要していた利用者のインタラクションが大幅に速くなる。見出しによって、スクリーンリーダ―を利用する全盲の人や、情報のグループを作る支援技術を利用する認知的な障害のある人、あるいは、コミュニケーション障害や読書のときにスクリーンリーダ―に支援される文盲の人のような、障害者がより簡単に見つけられる情報の塊を作ることができる。

注記

全ての達成方法は、特別なユーザエージェント (支援技術や特別なプラグインを含む) を必要とする人たちが入手でき、そうした種類のユーザエージェント (例えば、スクリーンリーダ―、あるいは適切にマークアップされたコンテンツのナビゲーションにキーボードが使えるようにするプラグインなど) を利用できることを仮定している。

訳注

WAIC では H69 に関するアクセシビリティ サポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティ サポーテッド（AS）情報: H69 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

訳注

WAIC では H69 に関するアクセシビリティ サポーテッド（AS）情報を提供している。2020 年 3 月版の アクセシビリティ サポーテッド（AS）情報: H69 も参照されたい。

事例

例 1

この事例では、各セクションの見出しを 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 ...

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

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

<!-- Logo, banner graphic, search form, etc.  -->
  <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>
   <!-- Text, images, other material making up the main content... -->

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

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>

参考リソース

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

訳注

「Accessibility Evaluation Toolbar」は 2018 年現在、最新の Firefox と互換性がないためにインストールできない。

検証

手順

  1. コンテンツが別々のセクションに分けられていることを確認する
  2. そのページの各セクションが見出しで始まることを確認する

期待される結果

  • 達成基準 2.4.1 の場合、#2 の結果が真であることを確認する。
  • 達成基準 2.4.10 の場合、#1 及び #2 の結果が真であることを確認する。