WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML

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

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

H69 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

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

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

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

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

事例

事例 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. コンテンツが複数のセクションに分けられていることを確認する。

  2. そのページの各セクションが見出しで始まることを確認する。

判定基準

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