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

フォームラベル

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

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

例 1. ラベルを持つシンプルなフォーム

<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="weissbergunder"/>
      <label for="wine-2">Weissbergunder</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">Berg Rottland Riesling</label>
    </li>
  </ul>
</form>

ARIA でラベルをつける

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

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

例 2. 順不同リストを使用して実装したラジオボタングループ (https://www.oaa-accessibility.org/examplep/radio1/ をもとに改作)

<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 を参照しています。

例 3. 別の要素で説明されているボタン

<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 属性はフォームコントロールに加えて、他の用途にも使用されることに注意してください。)

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

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

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

以下の例では、3 つのフィールドを持つシンプルなフォームを示しています。4 行目から 12 行目で、name および email フィールドは入力必須であることを示すために (ラベルの隣にアスタリスクを置くのに加えて) aria-required 属性を true に設定しています。2 番目の例は電子メールの形式を検証して、その結果に応じて email フィールド (HTML の 12 行目) の (要素を視覚的に変化させるのに加えて) aria-invalid 属性を設定する JavaScript コードスニペットです。

例 4a. 必須のフィールドを持つフォーム

<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>

例 4b. フォームの入力内容を検証するスクリプトの一部

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 alerts の使い方をご覧ください。

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