視覚障害者にも伝わるWeb設計：見出しとフォームラベルの基本

greeden

2年前

Webページを見ただけでは、HTMLがどのように組み立てられているかは分かりにくいものです。
しかし、画面の内容を音声などで伝える支援技術は、見出しやラベルを手がかりにページの構造と操作対象を利用者へ伝えます。

見出しは文章のまとまりと階層を示す要素です。
フォームラベルは入力欄に何を入力するのかを示す説明です。
見た目を整えるだけでなく、この二つをHTML上でも正しく設定すると、視覚障害者を含む多くの利用者が内容を把握し、目的の操作へ進みやすくなります。

見出しとラベルの役割

見出しとラベルは、どちらも内容を短い言葉で説明しますが、示す対象が異なります。
先に役割を分けておくと、実装時の混同を防げます。

要素	説明する対象	利用者が分かること
見出し	ページ内の章や節	どこに何が書かれているか
フォームラベル	入力欄や選択項目	何を入力または選択するか
ボタンの表示名	実行する操作	押すと何が起きるか

画面を目で読む利用者は、文字の大きさや配置から区切りを推測できます。
一方、スクリーンリーダーの仕組みを利用する場合は、HTML上の見出しやラベルがページを理解する手がかりになります。

伝わる見出しを設計する

ページの構造に合わせて階層を付ける

HTMLの見出しは、<h1>から<h6>までの階層を持ちます。
数字は文字サイズを指定するものではなく、文章構造の深さを表します。

WordPressでは投稿タイトルがページの主見出しになるため、本文は通常<h2>から始めます。
<h2>の内容をさらに分けるときは<h3>を使い、見た目の都合だけで階層を飛ばさないようにします。

<h1>ページのタイトル</h1>
<h2>見出しの設計</h2>
<h3>階層の決め方</h3>
<h3>見出し名の付け方</h3>
<h2>フォームラベルの設計</h2>

この例では、二つの<h3>が「見出しの設計」という<h2>に属します。
次の<h2>に移ると、話題がフォームラベルへ切り替わったことがHTML上でも分かります。

節の内容を予測できる名前にする

「詳細」「その他」のような見出しだけでは、その先にある情報を予測できません。
「ラベルと入力欄を関連付ける」「プレースホルダーとの違い」のように、節の内容が分かる言葉を使います。

検索されやすそうな語を並べることより、見出しの直後に書かれている内容を正確に表すことを優先します。
明確な見出しは、利用者が必要な節を探すときにも、検索システムが文章構造を解釈するときにも役立ちますが、それだけで検索順位の向上を保証するものではありません。

見た目とHTMLの役割を一致させる

太字や大きな文字にしただけの段落は、HTML上の見出しとしては扱われません。
反対に、見出し要素を文字サイズの調整だけに使うと、実際の文章構造と読み上げられる構造が食い違います。

構造は見出し要素で表し、文字サイズや色などの見た目はCSSで調整します。
色だけに頼らず、文字サイズ、太さ、余白も組み合わせると、弱視の利用者や認知面で読み取りにくさがある利用者にも区切りが伝わりやすくなります。

フォームラベルを正しく付ける

ラベルと入力欄をHTMLで関連付ける

入力欄の近くに「名前」と表示するだけでは、その文字と入力欄の関係が支援技術に伝わらない場合があります。
<label>のfor属性と、入力欄のidを同じ値にして関連付けます。

<label for="name">名前</label>
<input type="text" id="name" name="name">

この例では、for="name"とid="name"が対応しています。
見た目の位置関係だけに頼らず、コード上でも結び付ける点が実装の要点です。

ラジオボタンやチェックボックスを含む詳しい実装例は、視覚障害者にも使いやすいフォームラベルの付け方で確認できます。

入力内容が分かる具体的な言葉を使う

ラベルには、利用者が入力すべき内容を短く示します。
「入力してください」では対象が分からないため、「名前」「メールアドレス」「お問い合わせ内容」のように項目そのものを示します。

入力形式などの補足が必要なら、ラベルだけにすべてを詰め込まず、入力欄の近くに説明を置きます。
エラーを表示するときも、ラベルと同じ項目名を使えば、どの入力欄を修正するのかを追いやすくなります。

プレースホルダーをラベルの代わりにしない

プレースホルダーは、未入力の欄に表示する補助的な例やヒントです。
入力を始めると消えるため、利用者が項目名を確認できなくなることがあります。

たとえば、ラベルを「メールアドレス」、プレースホルダーを「name@example.com」とすれば、項目名と入力例を分けて伝えられます。
プレースホルダーがある場合も、常に確認できるラベルを残します。

ボタンには操作結果が分かる名前を付ける

ボタンは入力欄ではないため、通常は<label>ではなく、ボタン自体の文字で操作を説明します。
「こちら」「実行」のような曖昧な語を避け、「確認画面へ進む」「お問い合わせを送信」のように押した後の動作が分かる名前にします。

公開前の確認手順

コードだけを見て終わらせず、見た目と支援技術の両方で確認します。
次の順に点検すると、構造と表示の不一致を見つけやすくなります。

投稿タイトルの下に、本文の<h1>が重複していないか確認する。
<h2>と<h3>が内容の親子関係を表しているか確認する。
見出しだけを順に読んでも、ページの流れが分かるか確認する。
すべての入力欄に、内容を説明するラベルがあるか確認する。
forとidが正しく対応しているか確認する。
プレースホルダーを消しても、入力内容を判断できるか確認する。
スクリーンリーダーで見出し間を移動し、各入力欄の名前が意図どおり伝わるか確認する。

自動チェックは、見出し階層の飛びやラベルの不足を見つける補助になります。
ただし、見出し名が節の内容を正確に表しているか、ラベルが人にとって分かりやすいかは、実際に読み、操作して判断する必要があります。

見出しとラベルの実装で押さえる点

WordPressの本文では、投稿タイトルとの関係を確認して<h2>以下を組み立てる。
見出し名には、直後の節で扱う内容を具体的に書く。
見出しの階層と視覚上の強弱を一致させる。
フォームラベルのforと入力欄のidを対応させる。
プレースホルダーは入力例に使い、ラベルは常に確認できる形で残す。
公開前に見出しの移動とフォーム操作をスクリーンリーダーで確認する。

見出しは「どこに何があるか」を、ラベルは「何を入力または操作するか」を伝えます。
この役割の違いを保ったまま、見た目とHTMLの両方を整えることが、理解しやすく操作しやすいWebページにつながります。

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。