見出しとラベルを正しく設計すると、ページの構造と操作の目的が、見た目だけに頼らず伝わります。
見出しは情報のまとまりを示し、ラベルは入力欄やボタンなどの役割を示します。
似ているように見えますが、担当する役割は別です。
この記事では、WordPressの記事本文で使う見出し階層、フォームのラベル、ボタンやリンクの名前を、実装例と確認手順に分けて説明します。
見出しとラベルの違い
見出しは、続く内容の主題を示す短いテキストです。
読者は見出しを手がかりにページを読み進め、スクリーンリーダーの利用者は見出しの一覧や移動機能を使って目的の節を探せます。
ラベルは、入力欄や選択肢などの目的を示すテキストです。
WCAGでいう「ラベル」はHTMLの<label>要素だけを指す言葉ではなく、利用者に操作部品の目的を伝える表示を広く含みます。
アクセシブルな名前は、ブラウザーや支援技術が操作部品を識別するときに使う名前です。
見えるラベルとアクセシブルな名前は一致することが多いものの、同じ概念ではありません。
見出しでページ構造を伝える
見出しの数字は文字サイズではなく、内容の親子関係を表します。
このページではWordPressの投稿タイトルが<h1>になるため、本文の主な節には<h2>、その節の下位項目には<h3>を使います。
内容の階層に合わせて見出しレベルを選ぶ
例えば「申込方法」という<h2>の中に「必要書類」と「申込手順」があるなら、その二つは<h3>にします。
<h2>の直後に、見た目を小さくする目的だけで<h4>を置くと、構造を追いにくくなります。
<h2>申込方法</h2>
<h3>必要書類</h3>
<h3>申込手順</h3>見た目の大きさはCSSで調整し、見出しレベルは内容の階層で決めます。
見出しだけで節の内容がわかるようにする
「詳細」や「その他」のような見出しは、前後を読まなければ内容を判断できません。
「申込後の流れ」や「利用できないケース」のように、その節が答える問いを特定できる表現にします。
長い記事の文章構成まで見直す場合は、見出しや要約を含む文章の整え方も参考になります。
フォームの入力欄にラベルを関連付ける
入力欄の近くに「メールアドレス」と表示するだけでは、その文字と入力欄の関係がプログラムに伝わるとは限りません。
HTMLでは、<label>のfor属性と入力欄のidを同じ値にして関連付けます。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">この例では、画面に見える「メールアドレス」が入力欄のラベルとして関連付けられます。
name属性は送信データを識別するための値であり、labelのfor属性と対応するのはidです。
プレースホルダーは入力例や形式の補助には使えますが、ラベルの代わりにはしません。
入力後に表示が消える情報だけに目的を任せると、読者が何を入力しているのか確認しにくくなるためです。
ラジオボタンやチェックボックスを一つの質問としてまとめる場合は、個々の選択肢のラベルに加えて、質問全体の名前も示します。
フォーム全体の入力支援やエラー表示は、フォームの入力支援とエラー設計で詳しく説明しています。
ボタンとリンクの目的を具体的に書く
ボタンやリンクには通常、<label>要素ではなく、その要素自身のテキストで目的を示します。
ページ内の同じ「詳細」リンクを一覧にしたとき、どの詳細なのか区別できる表現が必要です。
| 対象 | 文脈がないと曖昧な例 | 目的が伝わる例 |
|---|---|---|
| 見出し | 詳細 | 申込後の流れ |
| 入力欄 | フィールド1 | メールアドレス |
| リンク | こちら | 料金表を見る |
| ボタン | 次へ | 入力内容を確認 |
「次へ」が常に不適切というわけではありません。
操作後の移動先が画面の文脈から明らかなら、短い名前でも目的を伝えられます。
複数段階のフォームなど、移動先を推測しにくい場面では「入力内容を確認」のように結果まで書くと迷いを減らせます。
WCAG 2.2で関係する達成基準
WCAG 2.2では、見出しとラベルの文章、HTMLで表した構造、入力時の説明を別々の達成基準で扱います。
- 1.3.1 情報及び関係性：見た目で示した構造や関係を、プログラムでも判別できるようにするか、テキストで提供します。
- 2.4.6 見出し及びラベル：見出しとラベルが、対象の主題または目的を説明するようにします。
- 3.3.2 ラベル又は説明：入力を求める場面では、必要なラベルまたは説明を提供します。
見出しの文言が明確でも、文字を太くしただけで見出し要素を使っていなければ、構造の伝達は別途確認が必要です。
反対に、正しい見出し要素を使っていても「詳細」だけでは、節の主題を十分に説明できない場合があります。
公開前の確認手順
- ページ内の見出しだけを順に読み、親子関係と内容の流れがわかるか確認します。
- 各入力欄の見えるラベルと、HTML上の関連付けを確認します。
- リンクやボタンのテキストだけを読んでも、移動先や実行結果を推測できるか確認します。
- WAVEやaxeなどの検査ツールで、見出し構造やラベルの欠落候補を調べます。
- キーボード操作、画面の拡大、支援技術を使う確認などを組み合わせ、実際の操作で迷わないか判断します。
自動検査は問題の候補を効率よく見つけますが、見出しやラベルの文言が文脈に合うかまでは判定できない場合があります。
ツールの結果だけで適合や使いやすさを断定せず、人が内容と操作を確認します。
利用できる検査方法を比較したい場合は、Webアクセシビリティのチェックツールも参照してください。
見出しとラベルの実装チェックリスト
- 本文の見出しを
<h2>と<h3>で論理的に構成している - 見出しレベルを見た目の大きさだけで選んでいない
- 見出しだけで、その節の主題を推測できる
- 各入力欄に目的のわかるラベルがある
labelのforと入力欄のidが対応している- プレースホルダーだけに入力欄の説明を任せていない
- リンクとボタンのテキストから、移動先や実行結果を推測できる
- 自動検査と人による操作確認を組み合わせている
見出しとラベルは、情報の構造と操作の目的を伝える仕組みです。
文章のわかりやすさとHTML上の関連付けを分けて点検すると、修正箇所を特定しやすくなります。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
サービスの内容はリンク先でご確認ください。