外部ラベルを用いている HTML 及び XHTML のコントロール
これは、次の達成基準に関連する実装方法である：
HTML 及び XHTML の仕様では、明示的なラベルと黙示的なラベルの両方を認めている。しかし、支援技術の中には、黙示的なラベルを正しく扱えないものがある（例えば、<label>名前 <input type="text" name="firstname"></label>)。
JAWS 7.10 を Windows XP で Internet Explorer 6.0 と Firefox 1.5 で検証したところ、仮想PCカーソルモードとフォームモードの両方で、テキストフィールドの明示的なラベルと黙示的なラベルを読み上げる。フォームモードでは、チェックボックスとラジオボタンの黙示的なラベルを読み上げない。
Window-Eyes 5.5 を Windows XP で Internet Explorer 6.0 と Firefox 1.5 で検証したところ、明示的にラベル付されたフォーム・フィールドを読み上げる。ブラウズモードでは、黙示的にラベル付されたフォーム・コントロールは読み上げられないが、ブラウズオフモードでコントロールからコントロールへ移動する際には、明示的なラベルは読み上げられる。
ユーザーエージェントは、title属性のあるinput要素上にマウスオーバーすると、ツールチップを表示する。title属性値は支援技術に引き渡され、多くのグラフィカル・ブラウザではツールチップとして表示される。ツールチップはキーボード操作では表示されないため、その情報は画面を見ているキーボードユーザーには提供されないと考えたほうがよい。
label要素がない場合、そのフォーム・コントロールがフォーカスを受け取ったときに、JAWS と Window-Eyes は title 属性値を読み上げる。
JAWS 6.0 以降では、label 要素のラベルと title 属性値が異なる場合には、その両方を読み上げるように設定することが可能である。しかし、この設定があることを知っているゆーざーはほとんどいない。
WindowEyes 5.5 では、ホットキーの Insert + E で、フォーカスのあるアイテムの title 属性値を含む追加の情報を提示できる。
ユーザーエージェントの中には、デフォルトではフォームのラベルにあるアスタリスク文字を読み上げないものがある（具体的には、Window-Eyes）。Window-Eyesのユーザーは、この設定を変更することができるが、多くのユーザーはその設定変更を行っていないと思われる。
この実装方法の目的は、Webアプリケーションまたはフォームで特定のフォーム・コントロールが必須項目であることを明確に示すことである。コントロールが必須項目であることを示す記号またはテキストは、label要素、またはfieldset要素でグループ化されたコントロールに対するlegend要素を用いて、プログラムが解釈できるようにそのコントロールと関連付ける必要がある。記号が用いられている場合には、事前にユーザーにその意味を説明する必要がある。
以下のコード例にあるテキストフィールドには、明示的なラベル「名前（必須）」がある。label 要素の for 属性値が、input 要素の id 属性値と合致していて、label 要素でマークアップされたテキストによってそのコントロールが必須項目であることを示している。
コード例：
<label for="firstname">名前（必須）:</label>
<input type="text" name="firstname" id="firstname" />
注記：英語では、必須項目の "required" を略して "req." とするコンテンツ制作者もいるが、この略語は分かりにくいという報告がある。
以下のコード例にあるテキストフィールドには、必須項目であることを示すアスタリスクを含んだ明示的なラベルがある。アスタリスクの意味をフォームの先頭で定義することが重要である。このコード例では、アスタリスクは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" />
以下のコード例にあるテキストフィールドには、コントロールが必須項目であることを示す画像を含む明示的なラベルがある。画像の意味をフォームの先頭で定義することが重要である。
コード例：
<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" />
...
ラジオボタン及びチェックボックスは、個々のラジオボタンやチェックボックスではなく、そのグループ全体で一つの必須項目となるため、他のインタラクティブなコントロールとは異なった扱われかたをする。事例 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>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
必須項目であるフォーム・コントロールに対して、必須項目であることがフォーム・コントロールの label 要素または legend 要素で示されている。
必須項目であることを示すテキスト以外のものに対して、それを使用しているフォーム・コントロールよりも前にその意味が説明されている。
上記の全てを満たしている。
注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。