要約

視覚的な表現に頼らず、フォームを理解しやすく操作しやすいようにします。

テクニック

• フォームコントロールの使用方法についてのラベルと説明を付けます。[[WCAG-3.3.2]]

• チェックボックスやラジオボタンなどの関連するコントロールの固まりをグループ化します。[[WCAG-1.3.1]]

• 必須のフォームフィールドを識別します。[[WCAG-3.3.2]]

• フォーム入力エラーを特定して説明します。

解説

フォームを効果的に使用するための最大の障壁の1つは、フォームのレイアウトについての理解と移動です。ユーザーの助けになるように、フォームコントロールには常にlabel要素を使用して明確にラベルを付けてください。

<label id="label" for="fname">First name:</label>

<input type="text"
      id="fname"
      name="first-name"/>

for属性は、ラベルをそのコントロールに明示的に関連付けるために使用されます。 label内にコントロールを含んでいる場合にも、この属性を付けるべきです。

<label id="label" for="q1a">
   <input type="radio"
        id="q1a"
        name="q1-answer"/> a. Apples
</label>

追加の指示（テキスト制限や文字制限など）を付ける場合は、ラベル内にそれらを組み込んで、ユーザーがすぐに情報を利用できるようにしてください。これが難しい場合は、追加の指示を含む要素を示すコントロールにaria-describedby属性を追加してください。

<label for="uname">User name:</label>

<input type="text"
      id="uname"
      name="username"
      aria-describedby="req" />

<span id="req">
   User names must be between 8 and 16 characters in 
   length and contain only alphanumeric characters.
</span>

支援技術を使用するユーザーが視覚的な手がかりがなくても認識できるように、必須フィールドにはHTML5のrequired属性の付与が必要です。

<input type="text"
      id="uname"
      name="username"
      aria-describedby="req"
      required="required"
      aria-required="true"/>

検証

フォームにユーザーによる修正が必須な無効データが含まれている場合（訳注：ユーザーが無効データをフォームに入力した場合等）、各フィールドにaria-invalid属性を追加し、支援技術によってそれらのフィールドをすばやく識別して、ユーザーをそのフィールドに移動できるようにします。

if (country.value == 'US' && zip.value = '') {
   zip.setAttribute('aria-invalid', true);
}

else {
   zip.setAttribute('aria-invalid', false);
}

フォーム要素にデフォルトの状況ではaria-validを付けないでください。ユーザーがフォームを送信するまでは、フォーム内のフィールドは有効でも無効でもありません。

すべてのユーザーの体験向上のため、フォームフィールドに、正規表現によって検証が行える新しいHTML5のpattern属性の使用を検討してください。問題があればすぐにユーザーに警告され、送信するまで待つ必要がありません。pattern属性による検証を使用する場合は、要件を説明するために必ずtitle属性も付けてください。ユーザー名フィールドでは、次のように文字数と文字の種類を制限できます。

<input type="text"
      id="uname"
      name="username"
      aria-labelledby="username-label"
      pattern="[A-Za-z0-9]{8,16}"
      title="User names must be 8 to 16 alphanumeric characters"
      required="required"
      aria-required="true" />

関連リンク

• MDN — <form>
• HTML —フォーム