関連するフォームコントロールを特定するために、グルーピングロールを使用する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

Accessible Rich Internet Applications (WAI-ARIA) をサポートするウェブコンテンツ技術。

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、グループのように、フォーム内部で関連するコントロールのセットをマークアップすることである。グループに関連付けられた任意のラベルは、グループ内の個別のコントロールに対する共通のラベル又は修飾子としても機能する。支援技術は、グループ内および外へのナビゲーションの際に、グループの開始と終了、およびグループのラベルを示すことができる。これは、ユーザインタフェースのデザインが fieldset と legend による達成方法 (H71) を採用することが困難である場合に、プログラム的にフォームコントロールをグループ化するために実行可能な代替手段である。

ラジオボタングループの場合、role="group" の代わりに role="radiogroup" を使用できる。

グループは aria-labelledby を使用してラベル付けできる。

この達成方法は、role="group" をもつ単一のコンテナ内にフォーム上のすべてのコントロールを包むためのものではない。

事例

事例 1: 社会保障番号

9 桁の長さで、三つのセグメントに分割される社会保障番号フィールドは、role="group" を使用してグループ化できる。

<div role="group" aria-labelledby="ssn1">
   <span id="ssn1">Social Security#</span> 
   <span style="color: #D90D0D;"> * </span>
   <input size="3" type="text" aria-required="true" title="First 3 digits" />-
   <input size="2" type="text" aria-required="true" title="Next 2 digits" />-
   <input size="4" type="text" aria-required="true" title="Last 4 digits" />
</div>

実装例: 複数パートに分かれたフィールドのグループ化.

事例 2: ラジオグループを特定する

この例は、role=radiogroup のデモである。ラジオボタンが role=radio をもつカスタムコントロールであることにも注意。(しかし span を実際にラジオボタンのように動作させるためのスクリプトは、この例には含まれていない。) 必要に応じて、グループの関係を視覚的に強調するために、フィールドのようにグループの周りにボーダーを配置するために CSS を使用してもよい。CSS プロパティはフォームの下にある。

<h3>Set Alerts for your Account</h3>
  <div role="radiogroup" aria-labelledby="alert1">
    <p id="alert1">Send an alert when balance exceeds $ 3,000</p>
    <div>
      <span role="radio" aria-labelledby="a1r1" name="a1radio"></span>
      <span id="a1r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a1r2" name="a1radio"></span>
      <span id="a1r2">No</span>
    </div>
  </div>
  <div role="radiogroup" aria-labelledby="alert2">
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <div>
      <span role="radio" aria-labelledby="a2r1" name="a2radio"></span>
      <span id="a2r1">Yes</span>
    </div>
    <div>
      <span role="radio" aria-labelledby="a2r2" name="a2radio"></span>
      <span id="a2r2">No</span>
    </div>
  </div>
  <p><input type="submit" value="Continue" id="continue_btn" name="continue_btn" /></p>

フィールドのグループの周りにボーダーを配置するための、関連する CSS スタイル定義:

div[role=radiogroup] {
  border: black thin solid;
} 

実装例: 関連するフォームコントロールを識別するためにグループ化ロールを使用する

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

各コントロールに対する個別のラベルが十分な説明を提供せず、かつ追加のグループレベルの説明が必要とされる場合、関連するコントロールグループに対して:

  1. 論理的に関連する input 又は select 要素のグループが role=group をもつ要素内に含まれていることを確認する。
  2. このグループが aria-label 又は aria-labelledby を使用して定義されるアクセシブルな名前を持つことを確認する。

期待される結果

  • 1. 及び 2. の結果が真である。