テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
見出し
見出しはコンテンツに階層構造を与え、ページの構成を理解しやすくします。支援技術は見出しをナビゲーションの目印として用いるため、見出し構造が適切であれば、ユーザーはいち早く目的の内容に到達できます。
見出しの階層
見出し階層のデモ
h1 から h6 までの標準的な見出し階層と、ARIA を用いたカスタム見出しの例です。見出しレベルは論理的な順序に従う必要があります。
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Custom Heading (role="heading" aria-level="7")
ベストプラクティス:
- ページの主題には h1 を使用する
- 見出しレベルを飛ばさない（h1 の次に h3 としない）
- 先に見出しで論理的なアウトラインを作る
問題のある見出し
問題例: レベル飛び
❌ h2 や h3 を用いず h4 が現れるなど、誤った見出し階層の例です。論理的な文書構造が崩れます。
Main Title (h1)
Skipped to h4 - This is problematic!
この h4 は階層を保つため h2 にするべきです。
空の見出し
❌ テキストのない見出し要素です。支援技術のユーザーは、この見出しのついた部分に何があるのか予想できません。
この h6 要素にはテキストがなく、利用者に価値を提供しません。
aria-level のない role="heading"
⚠️ role="heading" を使いながら aria-level 属性を指定していないカスタム見出しです。支援技術はデフォルトでレベル 2 の見出しとして扱うため、意図した文書構造と一致しない場合があります。aria-level を明示しましょう。
Custom Heading (role="heading" without aria-level)aria-level がない場合、この見出しはレベル 2 として扱われます。
ネイティブの見出しタグを上書きする aria-level
⚠️ aria-level="4" を指定した h2 要素です。ARIA 属性がタグ本来のレベルを上書きするため、マークアップ上は h2 でも支援技術はレベル 4 の見出しとして扱います。紛らわしいため、適切なレベルの見出しタグを使うことが望ましいです。
h2 element with aria-level="4"
支援技術はこの h2 をレベル 4 の見出しとして扱います。