適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
見出しは<h1>~<h6> 、段落は<p>など、内容に合った適切なHTMLタグを使い、文書の構造を正しくマシンリーダブルにする。
具体的な実装方法
1.3.1 A
1. ⭕️良い例
見出し
<h1>から<h6>をページの階層構造に合わせて順番通りに使用します。
<h1>ページの主題</h1>
<h2>第一セクション</h2>
<h3>第一セクションの小項目</h3>リスト
- 順序のないリストは
<ul>、順序のあるリストは<ol>でマークアップします。
フォーム
<label>要素のfor属性と、<input>などフォームコントロールのid属性を対応させ、項目とラベルを関連付けます。
<label for="user-name">お名前:</label>
<input type="text" id="user-name">2. ❌悪い例
見出しを<div>とCSSで表現する
なぜ問題なのか
- 見た目は見出しでも、プログラム上の構造は見出しではないため、スクリーンリーダーは見出しとして認識できず、見出しジャンプ機能が使えません。
改善策
<h2>などの適切な見出し要素を使用します。
リストを改行<br>で表現する
なぜ問題なのか
- 単なる改行であり、項目のリストであることがプログラムに伝わりません。スクリーンリーダーは「リストが3項目ある」のようにアナウンスできません。
改善策
<ul>と<li>要素でリストをマークアップします。
3.プラットフォーム別の実装
主にHTMLのセマンティックな要素を用いて実装します。
見出し
<h1>-<h6>
リスト
<ul>,<ol>,<li>
表
<table>,<caption>,<th>,<tr>,<td>
フォーム
<form>,<label>,<input>
補足
- WAI-ARIAの
role属性やaria-*プロパティを使い、より複雑な関係性を定義することも可能です。
4.特殊なケースへの対応
データテーブル
<th>要素にscope="col"（列ヘッダ）やscope="row"（行ヘッダ）を指定することで、セルとヘッダの関係性を明確にします。
複雑なUIコンポーネント
- タブUIなどHTMLだけでは構造を表現しきれない場合は、WAI-ARIA（
role="tablist"など）を用いて役割や状態を定義します。
確認観点
1.3.1 A
1.定量的な基準の担保
自動チェックツールでの合格
Lighthouse
- 見出しレベルの順序やフォームラベルの有無などをチェックできます。
axe DevTools
- ARIAの利用方法やセマンティックな構造に関する問題を検出します。
チェックリストの達成度:
2.定性的な基準の担保
レビュー
- コードレビュー時に、ブラウザの開発者ツールでDOMツリーを確認し、見た目だけでなくHTMLの構造が意図通りにマークアップされているかを確認します。
専門家による監査
- アクセシビリティ専門家が、実際にスクリーンリーダーを使用してページを操作し、見出しジャンプ機能でページ全体を把握できるか、フォームの操作に迷う点はないかなど、実際の利用者体験に基づいた評価を行います。