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

概要

ページ内の異なるセクションを視覚的に区分し、ユーザーが情報を容易に見つけることができるようにすることを目的としています。見出し要素を使用することで、スクリーンリーダーのユーザーがページの内容を理解しやすくなり、ページのナビゲーションがスムーズになります。

このページでは、ウェブサイト制作でよく直面する課題に対して、基本的で取り組みやすい方法を紹介しています。
ただし、他にも対処すべき状況や多くの手段があり、具体的な状況に応じて最適な方法を選ぶことが大切です。

適用（対象）

こちらは、次の達成基準に関連する達成方法です。

• 2.4.1 ブロックスキップ

実践的な方法

見出し要素（h1からh6まで）を適切に選択し、文書の階層構造を示します。例えば、ページのタイトルにh1を使用し、セクションタイトルにh2を使用するなどです。見出しはページの内容に応じた適切なレベルを選び、階層的な構造を保つことが重要です。

<h1>ウェブアクセシビリティガイドライン</h1>
<h2>導入</h2>
<p>ウェブアクセシビリティの重要性について説明します。</p>
<h2>基本原則</h2>
<h3>認識可能</h3>
<p>情報や操作方法はユーザーに認識可能である必要があります。</p>
<h3>操作可能</h3>
<p>インターフェースコンポーネントやナビゲーションは操作可能でなければなりません。</p>
<h2>結論</h2>
<p>アクセシビリティの向上は全てのユーザーに利益をもたらします。</p>

注意点

見出しレベルを飛ばして使用しないように注意します。例えば、h2の次にh4を使わないようにします。また、見出し要素のスタイルを変更する際には、CSSを使用して外観を調整し、HTML構造は適切なままに保ちます。見出しの使用は文書の論理的な構造を反映するものであり、装飾のためだけに使用しないようにします。

まとめ

見出し要素を提供することで、ページの構造を明確にし、ユーザーが情報を容易に見つけられるようにします。適切な見出しレベルを選び、具体的で簡潔かつ一貫性のある見出しを使用することが重要です。また、見出しレベルを飛ばさず、CSSで見出しのスタイルを調整する際もHTML構造を適切に保ちます。このような手法を実践することで、アクセシビリティの向上に貢献し、全てのユーザーにとって使いやすいウェブサイトを作成することができます。