WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.0 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

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

これは、次の達成基準に関連する達成方法である:

ユーザエージェント及び支援技術によるサポート

H90 に関するユーザエージェントサポートノートを参照のこと。

解説

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

事例

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

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

コード例:

<label for="firstname">名前 (必須):</label> 
<input type="text" name="firstname" id="firstname" /> 

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

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

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

コード例:

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

HTML:

<p> 必須項目には、アスタリスク (<abbr class="req" title="必須">*</abbr>)が付いています。</p>
<form action="http://www.test.com" method="post">
<label for="firstname">名前 <abbr class="req" title="必須">*</abbr>:</label> 
<input type="text" name="firstname" id="firstname" /> 

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

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

コード例:

<p><img src="req_img.gif" alt="(必須)" /> は、そのフォームコントロールが必須項目であることを示しています。</p>
<form action="http://www.test.com" method="post">
<label for="firstname">名前 <img src="req_img.gif" alt="(必須)" />:</label> 
<input type="text" name="firstname" id="firstname" />
... 

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

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

コード例:

<fieldset>
<legend>私が関心のあるもの (必須):</legend>
<input type="checkbox" id="photo" name="interests" value="ph">
<label for="photo">写真</label></br>
<input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
<label for="watercol">水彩画</label></br>
<input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
<label for="acrylic">アクリル画</label>
…
</fieldset> 

参考リソース

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

検証

手順

  1. 必須項目であるフォームコントロールに対して、必須項目であることがフォームコントロールの label 要素又は legend 要素で示されている。

  2. 必須項目であることを示すテキスト以外のものに対して、それを使用しているフォームコントロールよりも前にその意味が説明されている。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。