テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは 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 要素にはテキストがなく、利用者に価値を提供しません。