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

事例 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;
} 

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