ひと目でわかる見出し（1.3.1 A／2.4.6 AA）

19 September 2025

適合レベル

A / AA

※各レベルについては適合レベルとはをご覧ください

概要

情報のかたまりごとに、内容がひと目でわかる見出しをつけ、文章全体の構成を明確にする。

具体例

_

具体的な実装方法

1.3.1 A

1. ⭕️良い例

  • 見出し: <h1>から<h6>までの見出し要素を、ページの階層構造に合わせて順番通りに使用します。
<h1>ページの主題</h1>
<h2>第一セクション</h2>
  <h3>第一セクションの小項目</h3>
<h2>第二セクション</h2>
  • リスト: 順序のないリストは<ul>、順序のあるリストは<ol>でマークアップします。
<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>
  • フォーム: <label>要素のfor属性と、フォームコントロール（<input>など）のid属性を対応させ、項目とラベルを関連付けます。
<label for="user-name">お名前:</label>
<input type="text" id="user-name" name="name">

2. ❌悪い例

  • 見出しを<div>とCSSで表現する

    <div style="font-size: 24px; font-weight: bold;">これは見出しです</div>
    • なぜ問題なのか: 見た目は見出しですが、プログラム上の構造は見出しではないため、スクリーンリーダーは見出しとして認識できず、見出しジャンプ機能が使えません。

    • 改善策: <h2>などの適切な見出し要素を使用します。

      <h2>これは見出しです</h2>

  • リストを<br>で表現する

    項目1<br>
項目2<br>
項目3
    • なぜ問題なのか: 単なる改行であり、項目のリストであることがプログラムに伝わりません。スクリーンリーダーは「リストが3項目ある」とアナウンスできません。
    • 改善策: <ul>と<li>要素を使用してリストをマークアップします。

3. プラットフォーム別の実装

  • Web: 主にHTMLのセマンティックな要素を用いて実装します。
    • 見出し: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    • リスト: <ul>, <ol>, <li>
    • 表: <table>, <caption>, <th> (scope属性付き), <tr>, <td>
    • フォーム: <form>, <label> (for属性付き), <input>, <select>, <textarea>, <button>
    • ランドマーク: <header>, <footer>, <nav>, <main>, <aside>
    • 補足: aria-labelledbyやaria-describedbyを利用して、要素間の関係性を明示的に関連付けることも可能です。

4. 特殊なケースへの対応

  • 複雑なUIコンポーネント: タブUIやアコーディオンなど、HTMLだけでは構造を表現しきれない場合は、WAI-ARIA（role属性やaria-*属性）を用いて役割、プロパティ、状態を定義します。
    • 例（タブ）: role="tablist", role="tab", role="tabpanel", aria-selected属性などを使い、タブの構造と現在の状態を支援技術に伝えます。

2.4.6 AA

1. ⭕️良い例

  • 見出し: セクションの内容を要約した、具体的で分かりやすいテキストを使用します。

    <h2>配送先の住所を入力</h2>

  • リンク: リンクテキストだけで、リンク先のページの内容が推測できるようにします。

    <a href="financial-report-2024.pdf">2024年度 決算報告書 (PDF)</a>

  • ボタン: ボタンが実行するアクションを具体的に記述します。

    <button type="submit">アンケートを送信する</button>

2 ❌悪い例

曖昧な見出し

  • HTML

    <h2>情報</h2>
    • なぜ問題なのか: 「情報」という見出しでは、そのセクションにどのような情報（会社概要なのか、製品情報なのか、連絡先なのか）が含まれているのか全く分かりません。
    • 改善策: <h2>企業理念</h2> のように、セクションの内容を具体的に記述します。

曖昧なリンクテキスト

  • HTML

    <a href="service-details.html">詳細はこちら</a>
    • なぜ問題なのか: スクリーンリーダーでリンクだけを拾い読みすると、「詳細はこちら」が複数並び、どのサービスの詳細なのか区別がつきません。
    • 改善策: <a>要素のテキストを「〇〇サービスの詳細」のように、具体的にします。

3. プラットフォーム別の実装

このガイドラインは、主にHTML要素内に記述するテキストの内容に関するものです。

  • 見出し: <h1>～<h6>要素内のテキスト
  • リンク: <a>要素内のテキスト
  • ボタン: <button>要素、<input type="button">のvalue属性内のテキスト
  • フォームラベル: <label>要素内のテキスト

4. 特殊なケースへの対応

文脈上、どうしてもラベルを簡潔にせざるを得ない場合や、デザイン上ラベルを非表示にしたい場合は、支援技術向けに補足情報を提供する方法があります。

  • aria-label: 要素に直接、アクセシブルな名前（ラベル）を指定します。

    <button aria-label="商品Aを削除">
  <img src="delete-icon.svg" alt="">
</button>
  • aria-labelledby: ページ内の他の要素のテキストを、ラベルとして関連付けます。

確認観点

1.3.1 A

1. 定量的な基準の担保

自動チェックツールでの合格

  • Lighthouse: 「Accessibility」項目で、見出しレベルの順序が正しいか、フォームにラベルが付いているかなどをチェックできます。
  • axe DevTools: ブラウザの拡張機能として、ARIAの利用方法やセマンティックな構造に関する問題をリアルタイムで検出します。
  • ESLint (eslint-plugin-jsx-a11y): React(JSX)環境で、開発中にラベルの付け忘れなどを指摘します。

チェックリストの達成度

2. 定性的な基準の担保

レビュー

  • コードレビュー時に、ブラウザの開発者ツール（インスペクター）でDOMツリーを確認し、見た目だけでなくHTMLの構造が意図通りにマークアップされているかを確認します。

専門家による監査:

  • アクセシビリティ専門家が、実際にスクリーンリーダー（NVDA, VoiceOverなど）を使用してページを操作します。見出しジャンプ機能でページ全体を素早く把握できるか、フォームの操作に迷う点はないかなど、実際の利用者体験に基づいた評価を行います。

2.4.6 AA

1. 定量的な基準の担保

自動チェックツールでの合格

  • Lighthouseやaxe DevToolsなどのツールは、「リンクテキストが具体的でない」といった一部の問題を検出できる場合がありますが、見出しやラベルの「質」を評価することはできません。

チェックリストの達成度

2. 定性的な基準の担保

レビュー

  • 見出しのレビュー: ページの見出しだけを抜き出して読み、それだけでページ全体の構成や内容が理解できるかを確認します。
  • ラベルのレビュー: ページ内のリンクやボタンのテキストだけをリストアップし、それぞれの機能やリンク先が曖昧なく区別できるかを確認します。

専門家による監査

  • アクセシビリティ専門家が、スクリーンリーダーの見出しナビゲーション機能やリンク一覧機能を実際に使用し、利用者が混乱することなく効率的にページを操作できるかを評価します。文脈を無視しても意味が通じるかという視点で、各ラベルの品質を厳しくチェックします。

参考文献

＞ 達成基準 1.3.1: 情報及び関係性を理解する

＞ 達成基準 2.4.6: 見出し及びラベルを理解する