WCAG見出しチェッカー

WCAG 2.2 1.3.1基準に従って見出し階層を検証するためにHTMLを貼り付けます。スキップされたレベル、h1の欠如、重複するh1、空の見出しを特定します。

結果

HTMLを貼り付けて「見出しを確認」をクリックしてください。

📚 科学的根拠と情報源

このツールが対象とする人

適切な見出し構造は、ナビゲーションと理解のためにドキュメント構造に依存するスクリーンリーダーユーザーと認知障害のある人々にとって不可欠です。WebAIM Screen Reader User Surveysは、見出しナビゲーションがスクリーンリーダーユーザーの最も一般的で価値のある戦略の1つであることを定期的に発見しています。認知障害と学習障害のある人々も、明確な階層から恩恵を受け、見出しは認知負荷を減らすコンテンツの概要を提供します(W3C Cognitive Accessibility Guidance)。WHOのGlobal Report on Health Equity for Persons with Disabilities(2023年)は、世界中で13億人 — 世界人口の約16% — が重大な障害を抱えて生活していると推定し、その多くがセマンティックな見出し構造に依存する支援技術を使用しています。

WCAG 2.2の要件

  • SC 1.3.1(情報と関係、レベルA): 視覚的に伝達される情報、構造、関係はプログラムで決定可能でなければなりません。
  • SC 2.4.1(ブロックスキップ、レベルA): 見出しは、ユーザーがセクション間を移動できるようにし、スキップ機構として機能します。
  • SC 2.4.6(見出しとラベル、レベルAA): 見出しは、それらが導入するコンテンツのトピックまたは目的を説明します。
  • SC 2.4.10(セクション見出し、レベルAAA): セクション見出しはコンテンツを整理するために使用されます。

科学的参考文献

  • WebAIM(2024年)。「Screen Reader User Survey #10 Results。」 webaim.org · ページ構造を理解し、コンテンツを見つけるためにスクリーンリーダーユーザーが採用する主要戦略の1つとして見出しナビゲーションを一貫して発見しています。
  • Power, C., Freire, A., Petrie, H. & Swallow, D.(2012年)。「Guidelines are only half of the story。」 CHI ’12, ACM。 · 見出し構造の問題が、視覚障害ユーザーが頻繁に遭遇する障壁の1つであることを発見しました。
  • W3C Web Accessibility Initiative(2023年)。「Page Structure: Headings Tutorial。」 w3.org/WAI · ページごとに1つのh1と順次ネストを含む見出し階層のベストプラクティスを定義しています。
  • WebAIM。「Semantic Structure: Using Headings。」 webaim.org · 見出し構造がスクリーンリーダーナビゲーションと視覚的スキャンの両方をサポートする方法に関するアドバイス。
  • Deque Systems。「heading-order(axe-coreルール)。」 · 自動チェック: 有効なドキュメントアウトラインを保証するために、見出しレベルは一度に1つだけ増加する必要があります。
  • 世界保健機関(2023年)。 Global Report on Health Equity for Persons with Disabilities。 · 13億人(世界人口の16%)が重大な障害を抱えて生活していると推定。

免責事項

このツールは見出し階層構造のみをチェックします。色のコントラスト、キーボードアクセシビリティ、ARIAの使用など、WCAG 2.2準拠の他の側面を評価しません。有効な見出し階層は、アクセシビリティのために必要ですが十分な条件ではありません。完全なWCAG 2.2準拠には、支援技術での手動テストと組み合わせた包括的な監査ツール(axe、WAVE、Lighthouse)を使用してください。

注意: このツールは見出しの階層構造のみをチェックします。完全なWCAG 2.2準拠には、手動テストと組み合わせた包括的な監査ツールを使用してください。

関連ツール

アクセシビリティ・リソース スクリーン・リーダー・プレビュー カラーコントラストチェッカー アクセシブル・カラーパレットジェネレーター