チェックボックスのパターン

このパターンについて

WAI-ARIA は、2 種類の checkbox ウィジェットをサポートしています。二値状態のチェックボックスは、チェックされているとチェックされていないの 2 つの選択肢を切り替え、三値状態のチェックボックスは、部分的にチェックされているとして知られる追加の 3 番目の状態を許可します。

三値状態チェックボックスの一般的な使用法の 1 つは、ソフトウェアインストーラーにあります。そこでは、単一の三値状態チェックボックスを使用して、インストールオプションのグループ全体の状態を表し、制御します。そして、グループ内の各オプションは二値状態チェックボックスで個別にオン又はオフにできます。

利用者は、三値状態チェックボックスを使用して、単一のアクションでグループ内のすべてのオプションを変更できます。

全体のチェックボックスをチェックすると、グループ内のすべてのオプションがチェックされます。
全体のチェックボックスのチェックを外すと、グループ内のすべてのオプションのチェックが外れます。
そして、一部の実装では、システムは、全体の状態が最後に部分的にチェックされていたときにどのオプションがチェックされていたかを記憶している場合があります。この機能が提供されている場合、全体のチェックボックスを3回目にアクティブにすると、グループ内の一部のオプションのみがチェックされている部分的にチェックされている状態が再作成されます。

チェックボックス（二値状態）の例: シンプルな二値状態のチェックボックスを示します。
チェックボックス（混合状態）の例: HTML fieldset に含まれる二値状態の HTML チェックボックスのグループ内のチェック状態を反映及び制御するために、aria-checked に mixed を使用するチェックボックスを示します。

チェックボックスにフォーカスがあるときに Space キーを押すと、チェックボックスの状態が変更されます。

チェックボックスには、checkbox ロールがあります。
チェックボックスには、次のいずれかによって提供されるアクセシブルなラベルがあります。
- checkbox ロールを持つ要素内に含まれる可視テキストコンテンツ。
- checkbox ロールを持つ要素に設定された aria-labelledby の値によって参照される可視ラベル。
- checkbox ロールを持つ要素に設定された aria-label。
チェックされている場合、チェックボックス要素の aria-checked ステートは true に設定されます。
チェックされていない場合、チェックボックス要素の aria-checked ステートは false に設定されます。
部分的にチェックされている場合、aria-checked ステートは mixed に設定されます。
チェックボックスのセットが可視ラベルを持つ論理グループとして提示される場合、チェックボックスは group ロールを持つ要素に含まれ、それにはラベルを含む要素の ID に設定された aria-labelledby プロパティがあります。
提示にチェックボックス又はチェックボックスグループに関連する追加の説明的な静的テキストが含まれている場合、チェックボックス又はチェックボックスグループは、説明を含む要素の ID に設定された aria-describedby プロパティを持ちます。