見出しを用いてウェブページを構造化する

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

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

適用 (対象)

セクションで構成されたコンテンツのあるウェブページ

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

解説

この達成方法の目的は、それぞれのセクションにそのセクションを特定する見出しがあることを確実にすることである。達成基準 1.3.1 では見出しがプログラムによる特定可能な方法でマークアップされていることを要求している。

HTML においては、これは見出し要素 (h1, h2, h3, h4, h5, h6) によって実現されうる。これによりユーザエージェントは自動的にセクションの見出しを特定できる。他のウェブコンテンツ技術では、異なる方法で見出しを特定する。文書の全体的構造のナビゲーション及び理解を助けるには、コンテンツ制作者は適切に入れ子にした見出しを使用すべきである (たとえば h1 には h2 が続き、h2 には h2 か h3 が続き、h3 には h3 または h4 が続き……といったように)。

訳注:

MDN の <h1>–<h6>: HTML の見出し要素 - アクセシビリティへの配慮で言及されているように、見出しレベルを飛ばしてページを作成する (例えば、h1 要素の次に h3 要素を置く) と、スクリーンリーダーの利用者がそのページの見出しをナビゲートするときに、ページには存在しない h2 要素を誤って飛ばしてしまったのではないかと誤解する恐れがあることに注意する。

事例

事例 1: HTML のページを構造化するために用いられた見出し

ある調理法を紹介するページでは、h1 要素により全体のタイトルを示し、h2 要素で大項目としてサラダ油による調理とバターによる調理を示し、h3 要素で油による調理の詳細なサブセクションを示している。

              <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <title>Cooking techniques</title>
                </head>
                <body>
                <h1>Cooking techniques</h1>
                ... some text here ...
                <h2>Cooking with oil</h2>
                ... text of the section ...
                <h3>Sautéeing</h3>
                ...
                <h3>Deep frying</h3>
                <h2>Cooking with butter</h2>
                ... text of the section ...
                </body>
              </html>
            

参考リソース

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

検証

手順

  1. セクションで構成されたコンテンツのあるページを調べる。
  2. それぞれのセクションに見出しがあることを確認する。

期待される結果

  • 2. の結果が真である。