要約

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

テクニック

解説

フォームを効果的に使用するための最大の障害の 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>

注記

フォームコントロールがlabelによって識別されない場合は、コントロールのaria-labelledby属性を使用して、ラベルを含む要素を識別します。

追加の指示（テキスト制限や文字制限など）を含める場合は、ラベル内にそれらを含めて、ユーザーがすぐに情報を利用できるようにしてください。これが不可能な場合は、追加の指示を含む要素を識別するコントロールに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"/>

注記

すべての支援技術が新しい HTML5 属性を認識するとは限らないため、 aria-required属性を含めることが推奨されます。

検証

フォームにユーザーによる修正が必要な無効なデータが含まれている場合、各フィールドに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" />

関連リンク