【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用 (対象)

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

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

解説

この達成方法の目的は、それぞれのセクションにそれを識別できる見出しがついているようにすることである。達成基準 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. それぞれのセクションに見出しがあることを確認する。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。