この記事でわかること

  • 入力フォームのラベルと説明について、W3CのWCAGとフォームの解説が求めていること
  • プレースホルダー(入力欄の中の薄い文字)をラベルの代わりにしない理由
  • 必須の項目・入力の形式・選ぶ項目のまとまりの伝え方
  • 作ったフォームを確かめる手順と、つまずきやすいところ

問い合わせや申し込みの入力フォームは、見た目をすっきりさせたくて、項目の名前を入力欄の中の薄い文字だけにしてしまいがちです。ただ、それでは入力を始めたとたんに何の欄か分からなくなります。この記事では、ラベル(入力欄の名前)と説明(入力のしかた)の置き方を、W3Cのアクセシビリティの資料をもとに紹介します。

この記事の内容は、W3Cの「WAI」が出しているフォームの解説(Forms Tutorial)と、WCAG 2.2とその解説(Understanding)のページを、2026年10月24日に読んで確かめたものです。ツールやスクールの選び方と、法律上の扱いはこの記事では扱いません。

先に結論: ラベルは見える形で入力欄の近くに置く

先に結論を書くと、すべての入力欄に、見えるラベルを入力欄のすぐ近くに置き、必須かどうかや入力の形式は、入力を始める前に文字で分かるようにします。 入力欄の中の薄い文字は、補足の例として使うだけにします。決めることと置き方をまとめると、次のとおりです。

決めること 置き方
項目の名前 見えるラベル
入力の形式 ラベルの中か直後
必須の項目 文字でも示す
全体の決まり フォームの前
選ぶ項目 まとめて見出し
薄い例の文字 補足だけに使う

WCAGで関係する基準

入力フォームのラベルと説明には、WCAG 2.2の次の達成基準が関係します。

  • 達成基準3.3.2(Labels or Instructions、レベルA): 利用者に入力してもらうときは、ラベルか説明を置くこと
  • 達成基準2.4.6(Headings and Labels、レベルAA): 見出しとラベルが、内容や目的を表していること
  • 達成基準1.3.1(Info and Relationships、レベルA): ラベルと入力欄の結びつきなどが、見た目だけでなくコードでも分かること

達成基準3.3.2の解説では、利用者が何を入力すればよいか分かるようにするのが目的だとしています。この基準は必須の項目だけでなく、任意の項目を含むすべての入力欄に当てはまるとされています。

一方で、同じ解説では、説明が多すぎるのは少なすぎるのと同じくらい害になりうるとしています。ラベルも長くする必要はなく、達成基準2.4.6の解説では、目的が分かる手がかりになるなら、1語や1文字でもよいとしています。

手順1: すべての入力欄に見えるラベルを付ける

W3Cの解説では、ラベルは入力欄の目的を表す必要があるとしています。「お名前」「電話番号」のように、何を入れる欄かがそのまま分かる名前にします。

ラベルはHTMLのlabel要素で入力欄と結びつけ、labelのfor属性の値を、入力欄のid属性の値と完全に同じにします。W3Cの解説では、こうして結びつけると、ブラウザがラベルの部分も押せる範囲として扱い、支援技術も正しいラベルを読めるとしています。入力欄をlabel要素の中に入れる結びつけ方もありますが、解説では、forとidで結びつける方が、一般に支援技術で使える場面が多いとしています。

置く場所について、W3Cの解説では、左から右へ書く言語では、チェックボックスとラジオボタンはラベルを右に、ほかの入力欄は左かすぐ上に置くのが一般的だとしています。また、一般にラベルを入力欄の上に置くと、見え方の弱い人やスマートフォンを使う人の横のスクロールが減るとしています。文字を拡大したときの崩れ方は、Webデザインで文字の大きさと行間を決める方法で紹介しています。

デザインの案として、見えるラベルを置かないことが提案される場合もあります。W3Cの解説では、ほとんどの利用者は、フォームを理解するのに見えるラベルを好むか、必要としているとしています。

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

W3Cの解説では、プレースホルダーはラベルの代わりにならないとしています。理由は次のとおりです。

  • 読み上げソフトがラベルとして扱わない: 解説では、読み上げソフトなどの支援技術は、プレースホルダーをラベルとして扱わないとしています
  • 入力を始めると消える: 解説では、プレースホルダーは利用者が文字を入れ始めると消え、入力の例が消えると、送信の前に見直すのが難しくなるとしています
  • 薄くて読みにくい: 解説では、プレースホルダーは利用者が入れた文字より、背景との色の差が小さく表示されることが多いとしています

プレースホルダーを使うなら、見えるラベルとは別に、入力の例を見せるだけにします。W3Cの解説では、背景が白のときにプレースホルダーの色を#767676にすると、ぎりぎりでコントラストの基準を満たすという例が示されています。色の差の確かめ方は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています。

手順3: 必須の項目と入力の形式を先に伝える

W3Cの解説では、必須の項目と任意の項目、受け付けるデータの形式などを伝えるとしています。伝える場所は、内容によって分けます。

  1. フォーム全体の決まりは、フォームの前に書く: 解説では、全体の説明をフォームの前に置くと、読み上げソフトがフォームの中だけを読む状態に切り替わる前に読み上げられるとしています
  2. 項目ごとの形式は、ラベルの中に書く: 解説では、必須であることやデータの形式を、ラベルの文字の中で示すことも大切だとしています。「有効期限(MM/YYYY)」のように、ラベルの中に形式を書く例が挙げられています
  3. ラベルの外に書く説明は、入力欄と結びつける: 解説では、ラベルの外の説明は置き方の自由がきく一方で、見落とされることがあるとしています。aria-describedby属性で結びつけると、ラベルなどが読み上げられた後に、その説明が読み上げられます

必須の項目を「」で示すときは、その意味も文字で書きます。達成基準1.3.1の解説では、「必須の項目にはを付けています」のような説明を、示している情報の近くに置く例が挙げられています。同じ解説の例では、必須の項目のラベルを赤で示したうえで、ラベルの最後に「*」も付けています。色だけで必須を示すと、色の見分けにくい人には伝わりません。

次のHTMLは、ラベル・説明・必須の印を入力欄と結びつける見本です。HTMLを書くときの参考にする見本で、実行するコマンドではありません。既にあるサイトのファイルを直すときは、直す前のファイルを控えてから変え、表示を確かめます。

<!-- 見本: ラベル・説明・必須の印を入力欄と結びつける -->
<p>*の付いた項目は必須です。</p>
<form>
  <label for="tel">電話番号 *(半角数字、ハイフンなし)</label>
  <input type="tel" id="tel" name="tel" aria-describedby="tel-hint" required>
  <p id="tel-hint">日中に連絡がとれる番号を入れます。</p>

  <fieldset>
    <legend>連絡の方法 *</legend>
    <input type="radio" id="contact-tel" name="contact" value="tel">
    <label for="contact-tel">電話</label>
    <input type="radio" id="contact-mail" name="contact" value="mail">
    <label for="contact-mail">メール</label>
  </fieldset>
</form>

手順4: 選ぶ項目は、まとめて見出しを付ける

ラジオボタンやチェックボックスのように、いくつかの中から選ぶ項目は、まとまりとして見せます。W3Cの解説では、まとめることは見た目とコードの両方で行う必要があるとしています。コードではfieldset要素で囲み、legend要素がそのまとまりの見出しになります。

解説では、ラジオボタンのまとまりは、いつもfieldset要素でまとめるとしています。上の見本では、「連絡の方法」が見出しで、「電話」「メール」がそれぞれのラベルです。見出しだけで、選ぶ1つ1つにラベルが無いと、何を選んでいるのかが分からなくなります。

作ったフォームを確かめる

作ったフォームは、次の順で確かめます。

  1. ラベルを押してみる: ラベルの文字を押して、対応する入力欄が選ばれるか、チェックボックスが切り替わるかを見ます
  2. 文字を入れてから見直す: 入力欄に文字を入れた後でも、何の欄か分かるかを見ます。プレースホルダーだけに頼っている欄は、ここで分かります
  3. 必須と形式を、入力の前に読めるか: フォームの前と各ラベルを読むだけで、どの項目が必須で、どの形式で入れるのかが分かるかを見ます
  4. 選ぶ項目の見出し: ラジオボタンとチェックボックスのまとまりに、見出しがあるかを見ます

W3Cの解説では、利用者は一般に、簡単で短いフォームを好むとしています。必要のない項目を入れていないかも見直します。

自分で直すか、相談するかの判断

迷ったときは、「HTMLのラベルと説明を書き足すだけで直るか」で決めます。label要素を足す、プレースホルダーに書いていた項目名をラベルに移す、「*」の意味をフォームの前に書く、といった直し方で済むなら、自分で直して、もう一度同じ手順で確かめます。

フォームが外部のサービスやプラグインで作られていて、HTMLを直接変えられないときは、そのサービスの設定でラベルを表示できるかを調べ、分からなければフォームを作った人や、Webデザインを教えている人に、確かめた結果を見せて相談します。

つまずきやすいところ

  • 見た目のために、ラベルを隠す: W3Cの解説では、検索の欄の横に検索のボタンがあるときのように、周りから目的がはっきり分かる場合に限り、ラベルを見た目だけ隠す方法を示しています。ほかの入力欄では、見えるラベルを置きます
  • 読み上げ用の名前だけを付ける: 達成基準3.3.2の解説では、読み上げ用の名前があっても、ラベルや説明が支援技術を使う人だけでなく、すべての利用者に見えていなければ、この基準を満たさないことがあるとしています
  • マウスを重ねたときの説明だけにする: W3Cの解説では、title属性で入力欄の名前を付ける方法は、一般に確実でなく、勧めないとしています
  • ボタンの名前を画像だけにする: 画像のボタンの名前は、画像の代替テキストで付けます。書き方は、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています

まとめ

  • すべての入力欄に、見えるラベルをすぐ近くに置き、HTMLのlabel要素で結びつけます
  • プレースホルダーはラベルの代わりにならないので、入力の例を見せる補足だけに使います
  • 必須の項目と入力の形式は、フォームの前とラベルの中で、入力を始める前に文字で伝えます
  • 選ぶ項目はfieldset要素とlegend要素でまとめ、ラベルを押す・文字を入れてから見直す手順で確かめます