チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が role="checkbox" を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox 要素は aria-checked を通して３つのステートを公開できます:
チェックボックス (checkbox) ロールは、チェック可能なインタラクティブなコントロールに使用します。 role="checkbox" を含む要素には、チェックボックスの状態を支援技術に公開するための aria-checked 属性も含める必要があります。
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> +</span> <label id="chk1-label">Remember my preferences</label>-
開発者はチェックボックスが作動した際に、 aria-checked 属性を動的に変更する必要があります。
ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA を追加する代わりにネイティブなものを使用することです。 次のように、代わりに <input type="checkbox"> のネイティブな HTML チェックボックスを使用してください。 これは、必要なすべての機能をネイティブに提供します。
チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。
+<input type="checkbox" id="chk1-label"> +<label for="chk1-label">Remember my preferences</label>-
チェックボックスロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:
ネイティブな HTML チェックボックスのフォームコントロールは、2つのチェックされた (checked) 状態（「チェックされた」または「チェックされていない」）のみを持つことができ、不確定な (indeterminate) 状態は JavaScript を介して設定可能です。 同様に、role="checkbox" を持つ要素は、aria-checked 属性を介して、true、false、または mixed の3つの状態を公開できます。
チェックボックスはインタラクティブなコントロールであるため、フォーカス可能でキーボードからアクセスできる必要があります。 ロールがフォーカス不可能な要素に適用される場合は、tabindex 属性を使用してこれを変更します。 チェックボックスをアクティブ化するために必要なキーボードショートカットは、Space キーです。
支援技術製品は次のように振る舞わなければなりません:
+開発者は、チェックボックスがアクティブ化されたときに、aria-checked 属性の値を動的に変更する必要があります。
aria-checked の値は、チェックボックスの状態を定義します。 この属性には、次の3つの値のいずれかがあります。
true
+ チェックボックスがチェックされています
+ false
+ チェックボックスがチェックされていません
+ mixed
+ チェックボックスが部分的にチェックされているか、不確定です
| キー | +機能 | +
|---|---|
| Space | +チェックボックスをアクティブ化します | +
aria-checked 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。aria-checked 属性の値を変更することでチェックボックスの状態を変更し、チェックボックスの外観を変更することで、視力のあるユーザーにチェックされているかどうかを見せます。次の例では、CSS と JavaScript を使用して単純なチェックボックス要素を作成し、要素がチェックされているかどうかの状態を処理します。
-<span role="checkbox" id="chkPref" aria-checked="false" onclick="changeCheckbox()" onKeyPress="changeCheckbox()" + tabindex="0" aria-labelledby="chk1-label"></span> +<label id="chk1-label" onclick="changeCheckbox()" onKeyPress="changeCheckbox()">Remember my preferences</label>-
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> -<label for="chk1">Remember my preferences</label>+
[role="checkbox"] {
+ padding:5px;
+}
-注記
+[aria-checked="true"]::before {
+ content: "[x]";
+}
-使用された ARIA 属性
+[aria-checked="false"]::before {
+ content: "[ ]";
+}
+
+function changeCheckbox(event) {
+ let item = document.getElementById('chkPref');
+ switch(item.getAttribute('aria-checked')) {
+ case "true":
+ item.setAttribute('aria-checked', "false");
+ break;
+ case "false":
+ item.setAttribute('aria-checked', "true");
+ break;
+ }
+}
+
+{{EmbedLiveSample("Examples", 230, 250)}}
+ +チェックボックス (checkbox) ロールが要素に追加された場合、ユーザーエージェントは次のことを行う必要があります。
aria-checked 値が変更されたら、アクセス可能な状態変更イベントを送信します。支援技術製品は次のことを行う必要があります。
ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA のロール、ステート、またはプロパティを追加してアクセス可能にする代わりに、ネイティブなものを使用することです。 そのため、JavaScript と ARIA でチェックボックスの機能を再作成するのではなく、フォームコントロールを使用してネイティブな HTML チェックボックスを使用することをお勧めします。
-<input type="checkbox">TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加
-