チェックボックスロールの使用

チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が role="checkbox" を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox 要素は aria-checked を通して３つのステートを公開できます:

• aria-checked="true": チェックボックスはチェックされています
• aria-checked="false": チェックボックスはチェックされていません
• aria-checked="mixed": チェックボックスは部分的にチェックされています

開発者はチェックボックスが作動した際に、 aria-checked 属性を動的に変更する必要があります。

チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。

チェックボックスロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:

• チェックボックスを持っている要素を、オペレーティングシステムのアクセシビリティAPIへ公開します。
• aria-checked の値が変わった際に、アクセシブルなす～手との変更イベントを送信します。

支援技術製品は次のように振る舞わなければなりません:

• スクリーンリーダーは要素をチェックボックスとしてアナウンスしなければなりません。またオプションでチェックボックスを動作させる方法を提供します。

例1: ARIA によるチェックボックスロールの追加

<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
<label for="chk1">Remember my preferences</label>

• checkbox
• aria-checked

TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加