適用 (対象)
セクションで構成されたコンテンツのあるウェブページ
これは、次の達成基準に関連する達成方法である:
- 達成基準 1.3.1: 情報及び関係性 (参考)
- 達成基準 2.4.10: セクション見出し (十分な達成方法)
解説
この達成方法の目的は、それぞれのセクションにそのセクションを特定する見出しがあることを確実にすることである。達成基準 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>
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
検証
手順
- セクションで構成されたコンテンツのあるページを調べる。
- それぞれのセクションに見出しがあることを確認する。
期待される結果
- 2. の結果が真である。