label 要素又は legend 要素を使用して、必須のフォームコントロールを明示する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用(対象)

外部ラベルを用いている HTML 及び XHTML のコントロール

これは、次の達成基準に関連する達成方法である: 達成基準 3.3.2: ラベル又は説明を理解する (G131: 説明的なラベルを提供すると使用したとき十分)

解説

この達成方法の目的は、ウェブアプリケーション又はフォームにおける特定のフォームコントロールが、データ送信の成功のために必須であることを明確に示すことである。コントロールが必須であることを示す記号又はテキストは、label 要素、又は fieldset 要素でグループ化されたコントロールに対する legend 要素を用いて、プログラムが解釈できるようにそのコントロールと関連付ける必要がある。記号が用いられている場合には、事前に利用者にその意味を説明する必要がある。

事例

事例 1: テキストを用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、明示的なラベル「First name (required):」がある。label 要素の for 属性値が、input 要素の id 属性値と合致していて、label 要素でマークアップされたテキストによってそのコントロールが必須項目であることを示している。

<label for="firstname">First name (required):</label>
<input type="text" name="firstname" id="firstname" />
注記

英語では、必須項目の "required" を略して "req." とするコンテンツ制作者もいるが、この略語は分かりにくいという報告がある。

事例 2: アスタリスクを用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、必須項目であることを示すアスタリスクを含んだ明示的なラベルがある。アスタリスクの意味をフォームの先頭で定義することが重要である。このコード例では、アスタリスクは abbr 要素内にあって、アスタリスク文字にスタイルを指定できるようになっている。この CSS は、アスタリスク文字は視覚に障害のある利用者にとっては見えづらいため、デフォルトのアスタリスク文字よりもサイズを大きくしている。

CSS:
.req {font-size: 150%}

HTML:

<p> Required fields are marked with an asterisk (<abbr class="req" title="required">*</abbr>).</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <abbr class="req" title="required">*</abbr>:</label>
<input type="text" name="firstname" id="firstname" />

事例 3: 画像を用いて必須項目であることを示す

以下のコード例にあるテキストフィールドには、コントロールが必須項目であることを示す画像を含む明示的なラベルがある。画像の意味をフォームの先頭で定義することが重要である。

<p><img src="req_img.gif" alt="Required Control" /> indicates that the form control is required</p>
<form action="http://www.test.com" method="post">
<label for="firstname">First name <img src="req_img.gif" alt="Required Control" />:</label>
<input type="text" name="firstname" id="firstname" />
...

事例 4: ラジオボタン又はチェックボックスのグループが必須項目であることを示す

ラジオボタン及びチェックボックスは、個々のラジオボタン及びチェックボックスではなく、そのグループ全体で一つの必須項目となるため、他のインタラクティブなコントロールとは異なった扱われかたをする。事例 1〜3 で使用された方法は、ラジオボタン及びチェックボックスに適用されるが、必須状態の表示は、label 要素ではなく legend 要素に配置すべきである。

<fieldset>
<legend>I am interested in the following (Required):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">Photography</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">Watercolor</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">Acrylic</label>
…
</fieldset>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注

HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。HTML §4.10.4 The label element を代わりに参照できる。

検証

手順

  1. 必須項目であるフォームコントロールに対して、必須項目であることがフォームコントロールの label 要素又は legend 要素で示されている。
  2. 必須項目であることを示すインジケータのうち、テキスト以外のものに対して、それを使用しているフォームコントロールの前にその意味が説明されていることを確認する。

期待される結果

  • 上記の全ての結果が真である。