WCAG 2.2 ガイドライン「2.4.10 セクション見出し」Level AAA について
はじめに
WCAG 2.2の「2.4.10 セクション見出し」は、コンテンツを論理的に整理するために見出しを使用することを求めています。この基準は、コンテンツをセクションごとに分けてユーザーが情報を理解しやすくすることを目的としています。
1. 基準の概要
要件
- コンテンツを整理するためにセクションごとに適切な見出しを使用する。
- 見出しは、ページ内の情報構造を明確に示すものでなければならない。
注意点
- 「見出し」は広義の意味で使われ、セクションのタイトルやラベルも含みます。
- ユーザーインターフェースコンポーネントの見出しは対象外です（Success Criterion 4.1.2でカバー）。
2. 実装方法
a. HTML見出し要素を適切に使用する
HTMLの<h1>から<h6>までの見出し要素を使って、セクションを明確に区切ります。
例: 見出し要素を使ったセクション分け
HTML
<h1>会社概要</h1>
<p>私たちの会社は...</p>
<h2>ミッション</h2>
<p>私たちのミッションは...</p>
<h2>ビジョン</h2>
<p>将来の目標として...</p>
<h1>はページ全体のメインタイトル、<h2>はセクションタイトルとして使用。
b. 見出しを視覚的にわかりやすくする
CSSで見出しを装飾して、ユーザーが一目でセクションを認識できるようにします。
例: CSSによる見出しスタイル
CSS
h1 {
font-size: 2em;
color: #333;
}
h2 {
font-size: 1.5em;
color: #555;
}
c. スクリーンリーダー向けの補足
見出しが視覚的に表現されていない場合でも、スクリーンリーダーで適切に認識されるようにします。
例: 見出しの非表示
HTML
<h2 class="sr-only">お問い合わせ情報</h2>
<div>
<p>電話番号: 012-3456-7890</p>
<p>メール: info@example.com</p>
</div>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
d. 動的コンテンツに見出しを追加
JavaScriptを使用して動的に生成されるセクションにも見出しを追加します。
例: JavaScriptで見出しを追加
JavaScript
const section = document.createElement('section');
const heading = document.createElement('h2');
heading.textContent = '新しいセクション';
section.appendChild(heading);
document.body.appendChild(section);
3. よくある失敗例とその改善策
a. 見出しが欠落している
失敗例
<p>このセクションの内容です。</p>
問題点
- セクションの内容が一目でわかりにくい。
改善策
<h2>セクションタイトル</h2>
<p>このセクションの内容です。</p>
b. 見出しの構造が不適切
失敗例
<h2>メインタイトル</h2>
<h1>サブタイトル</h1>
問題点
- 見出しレベルが逆転しており、情報構造が不明確。
改善策
<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
4. アクセシビリティのメリット
a. コンテンツのスキャン性向上
- 見出しにより、ユーザーはページを素早くスキャンし、必要な情報を見つけやすくなります。
b. スクリーンリーダー利用者への配慮
- 見出しを正しく実装すると、スクリーンリーダーのナビゲーション機能でページ内を効率的に移動できます。
c. SEO効果
- 検索エンジンは見出しを重視するため、適切な見出し構造はSEOにも寄与します。
5. テスト方法
a. 手動テスト
- ページ全体を確認し、各セクションに適切な見出しがあるか確認。
- 見出しの階層が論理的に整っているかチェック。
b. スクリーンリーダーテスト
- スクリーンリーダーを使用して、見出しが正確に読み上げられるか確認。
c. 自動テストツール
- AxeやWAVEなどのツールで見出し構造を検証。
まとめ
WCAG 2.2の「2.4.10 セクション見出し」は、ページ内の情報を論理的かつ直感的に整理するために見出しを使用することを求めています。
実装ポイント
- セクションごとに適切な見出しを設置する。
- HTML見出し要素を正しい階層構造で使用する。
- スクリーンリーダーでも認識可能な見出しを提供する。
これにより、すべてのユーザーにとってわかりやすく、ナビゲーションしやすいウェブコンテンツを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。