【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が 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" をもつ単一のコンテナ内にフォーム上のすべてのコントロールを包むためのものではない。
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>実装例: 複数パートに分かれたフィールドのグループ化。
この例は、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;
} この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
各コントロールに対する個別のラベルが十分な説明を提供せず、かつ追加のグループレベルの説明が必要とされる場合、関連するコントロールグループに対して:
論理的に関連する input 又は select 要素のグループが role=group をもつ要素内に含まれていることを確認する。
このグループが aria-label 又は aria-labelledby を使用して定義されるアクセシブルな名前を持つことを確認する。
1. 及び 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。