ARIA: checkbox ロール
checkbox ロールは、チェック可能な対話型コントロールのためのものです。role="checkbox" が指定された要素には、支援技術にチェックボックスのステートを通知するために、aria-checked 属性も指定する必要があります。
<span
role="checkbox"
aria-checked="false"
tabindex="0"
aria-labelledby="chk1-label"></span>
<label id="chk1-label">設定を記憶する</label>
メモ:
ARIA の第一原則は、ネイティブの HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA を追加する代わりにネイティブなものを使用することです。次のように、代わりに HTML のチェックボックスである <input type="checkbox">を（関連付けられた <label> 付きで）使用してください。これは、必要なすべての機能をネイティブに提供します。
<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">設定を記憶する</label>
解説
ネイティブの HTML チェックボックス (<input type="checkbox">) のフォームコントロールは、2 つのステート（"checked" または "not checked"）、のみを持つことができ、不確定な (indeterminate) ステートは JavaScript を介して設定可能です。 同様に、role="checkbox" を持つ要素は、aria-checked 属性を介して、true、false、mixed の 3 つのステートを公開できます。
チェックボックスは対話的なコントロールであるため、フォーカス可能でキーボードからアクセスできる必要があります。 ロールがフォーカス不可能な要素に適用される場合は、tabindex 属性を使用してこれを変更します。 チェックボックスをアクティブ化するために必要なキーボードショートカットは、スペース キーです。
開発者は、チェックボックスがアクティブ化されたときに、aria-checked 属性の値を動的に変更する必要があります。
すべての子要素は表示用である
プラットフォームのアクセシビリティ API で表される際、テキストのみを含むことができるユーザーインターフェイス要素がいくつかあります。アクセシビリティ API は、checkbox に含まれる意味的要素を表す方法を持っていません。
この制限に対処するため、ブラウザーは、checkbox 要素のすべての子孫要素に対して自動的にロール presentation を適用します。これは、意味的なな子要素に対応しないロールであるためです。
例えば、見出しを含む以下の checkbox 要素を考えてみましょう。
<div role="checkbox"><h6>このチェックボックスの名前</h6></div>
checkbox の子要素はプレゼンテーション要素であるため、次のコードは以下と同等です。
<div role="checkbox"><h6 role="presentation">このチェックボックスの名前</h6></div>
支援技術のユーザーの視点から見ると、この見出しは存在しません。なぜなら、前回のコードスニペットは、アクセシビリティツリーにおいて以下と同等だからです。
<div role="checkbox">このチェックボックスの名前</div>
関連する WAI-ARIA のロール、ステート、プロパティ
aria-checked-
aria-checkedの値は、チェックボックスのステートを定義します。 この属性には、次の 3 つの値のいずれかがあります。 tabindex="0"-
支援技術のユーザーが Tab で移動してすぐに読み始めることができるように、フォーカス可能にするために使用します。
キーボードインタラクション
| キー | 機能 |
|---|---|
| スペース | チェックボックスをアクティブ化します |
必要な JavaScript
必要なイベントハンドラー
例
次の例では、CSS と JavaScript を使用して、本来は意味を持たないチェックボックス要素を作成し、その要素のチェック状態（チェックあり／なし）を処理しています。
HTML
<span
role="checkbox"
id="chkPref"
aria-checked="false"
tabindex="0"
aria-labelledby="chk1-label"></span>
<label id="chk1-label">設定を記憶する</label>
CSS
[role="checkbox"] {
padding: 5px;
}
[role="checkbox"]:focus {
border: 2px solid #0198e1;
}
[aria-checked="true"]::before {
content: "[x]";
}
[aria-checked="false"]::before {
content: "[ ]";
}
JavaScript
const item = document.getElementById("chkPref");
const label = document.getElementById("chk1-label");
function changeCheckbox(code) {
const checked = item.getAttribute("aria-checked");
if (code && code !== "Space") {
return;
}
if (checked === "true") {
item.setAttribute("aria-checked", "false");
} else {
item.setAttribute("aria-checked", "true");
}
}
item.addEventListener("keydown", (event) => {
changeCheckbox(event.code);
});
label.addEventListener("keydown", (event) => {
changeCheckbox(event.code);
});
item.addEventListener("click", changeCheckbox);
label.addEventListener("click", changeCheckbox);
アクセシビリティの注意事項
checkbox ロールが要素に追加された場合、ユーザーエージェントは次のことを行う必要があります。
- オペレーティングシステムのアクセシビリティ API でチェックボックスロールを持つものとして要素を公開します。
aria-checked値が変更されたら、アクセス可能なステート変更イベントを送信します。
支援技術製品は次のことを行う必要があります。
- スクリーンリーダーは、要素をチェックボックスとしてアナウンスし、任意でアクティブ化する方法を説明する必要があります。
チェックボックスを実装する人は、以下のことをするのが最適です。
- チェックボックスが、キーボード操作とクリックの両方で確実に選択・操作可能にします
- ユーザーの操作に応じて、
aria-checked属性を常に最新の状態に保ちます - チェックボックスにフォーカスが当たっていることを示すスタイルを設定します
メモ: 支援技術がこの手法をどのように扱うべきかについては、意見が異なる場合があります。 上記の情報はそれらの意見の 1 つであり、したがって規範的ではありません。
ベストプラクティス
ARIA の第一のルールは、ネイティブな HTML の要素や属性に必要としている意味論と振る舞いがある場合、要素を転用して ARIA のロール、ステート、またはプロパティを追加してアクセス可能にする代わりに、ネイティブなものを使用することです。 そのため、JavaScript と ARIA でチェックボックスの機能を再作成するのではなく、フォームコントロールを使用してネイティブな HTML チェックボックスを使用することをお勧めします。