WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

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

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

ユーザエージェント及び支援技術によるサポート

ARIA17 に関するユーザエージェントサポートノート (英語)を参照のこと。WAI-ARIA技術ノートも参照。

解説

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

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

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

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

事例

事例 1: 社会保障番号

9桁の長さで、3つのセグメントに分割される社会保障番号フィールドは、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を使用して定義されるアクセシブルな名前を持つことをチェックする。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。