基本的なフォームのヒント

伝統的な HTML のフォーム関連要素を使用してフォームを実装する際は、コントロール向けのラベルを提供することと、ラベルとコントロールとを明示的に結びつけることが重要です。スクリーンリーダーのユーザーがページを操作するとき、スクリーンリーダーはフォームコントロールについて読み上げますが、コントロールトラベルとの間に直接的な結びつきがないと、どのラベルが適切かをスクリーンリーダーが知る方法がなくなります。

以下の例では、ラベルを持つシンプルなフォームを示しています。それぞれの <input> 要素は id を持ち、またそれぞれの <label> 要素は for 属性で関連する <input> の id を示すことに注意してください。

html

<form>
  <ul>
    <li>
      <input id="wine-1" type="checkbox" value="riesling"/>
      <label for="wine-1">Berg Rottland Riesling</label>
    </li>
    <li>
      <input id="wine-2" type="checkbox" value="pinot-blanc"/>
      <label for="wine-2">Pinot Blanc</label>
    </li>
    <li>
      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
      <label for="wine-3">Pinot Grigio</label>
    </li>
    <li>
      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
      <label for="wine-4">Gewürztraminer</label>
    </li>
  </ul>
</form>

ARIA でラベルをつける

HTML の <label> 要素はフォーム関連の要素にふさわしいのですが、多くのフォームコントロールは <div> や <span> を使用した、動的な JavaScript ウィジェットとして実装されています。 WAI-ARIA こと Accessible Rich Internet Applications 仕様書は W3C の Web Accessibility Initiative によるもので、このような場合のために aria-labelledby 属性を用意しています。

以下の例では、順不同リストを使用して実装したラジオボタングループを示しています。3 行目で <ul> 要素の aria-labelledby 属性に、1 行目の <h3> 要素の id である rg1_label を設定しており、h3 要素がラジオボタングループのラベルです。

html

<h3 id="rg1_label">Lunch Options</h3>

<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Thai
  </li>
  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Subway
  </li>
  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
    <img role="presentation" src="radio-checked.gif" /> Radio Maria
  </li>
</ul>

ARIA で説明する

フォームコントロールはラベルに加えて、説明文が結びつけられることがあります。ARIA には、説明文とコントロールを直接結びつけるための aria-describedby 属性があります。

以下の例では別の <div> 要素内の文で説明されている、<button> 要素を示しています。<button> 要素の aria-describedby 属性は <div> 要素の id を参照しています。

html

<button aria-describedby="descriptionRevert">Revert</button>
<div id="descriptionRevert">Reverting will undo any changes that have been made
                            since the last save.</div>

メモ: aria-describedby 属性はフォームコントロールに加えて、他の用途にも使用されることに注意してください。

必須のフィールドと正しくないフィールド

メモ: required が全世界の 97% 以上のユーザーで利用できるようになったので、もはや required と aria-required の両方を使用することは推奨されません。

一般的にウェブ開発者は、必須のフィールドや正しくないフィールドを示すために視覚的な方法を使用します。しかし、支援技術 (AT) は必ずしもその表示から情報を推測できるわけではありません。 ARIA は、コントロールが必須あるいは正しくないことを示すための属性を用意しています。

フォーム要素は入力が必須であることを AT に示すために、aria-required プロパティを適用できます。
データフィールドに正しくないデータがあることを AT に知らせるために、プログラムで aria-invalid 状態を適用することで、ユーザは正しくないデータを入力したことを知ります。

以下の例では、 3 つのフィールドを持つ単純なフォームを示しています。 4 行目と 12 行目では、 aria-required 属性が（ラベルの横にあるアスタリスクに加えて）設定されており、名前とメールアドレスのフィールドが必須であることを表しています。この例の 2 番目の部分、 JavaScript のスニペットは、メールアドレスの書式を検証し、その結果に応じてメールアドレスフィールド（HTML の 12 行目）の aria-invalid 属性を設定します（要素の表示を変更するだけでなく）。

html

<form>
  <div>
    <label for="name">* Name:</label>
    <input type="text" value="name" id="name" aria-required="true"/>
  </div>
  <div>
    <label for="phone">Phone:</label>
    <input type="text" value="phone" id="phone" aria-required="false"/>
  </div>
  <div>
    <label for="email">* E-mail:</label>
    <input type="text" value="email" id="email" aria-required="true"/>
  </div>
</form>

フォームの入力を検証するスクリプトは次のようなものです。

var validate = function () {
  var emailElement = document.getElementById(emailFieldId);
  var valid = emailValid(formData.email); // 正しい場合に true、そうでない場合に false を返す

  emailElement.setAttribute("aria-invalid", !valid);
  setElementBorderColour(emailElement, valid); // 第 2 引数が false である場合は境界線を赤色に設定
};

役に立つエラーメッセージの提供

フォームを強化するための ARIA アラートの使い方をご覧ください。

フォームのアクセシビリティのために ARIA を使用する際のさらなるガイドラインについては、WAI-ARIA Authoring Practices のドキュメントをご覧ください。