Checkbox agrupados y accesibles

Los checkbox agrupados (a veces llamados mega-checkbox, parent checkbox o tri-state checkbox) son controles que representan y gestionan el estado de una colección de checkbox hijas. Cuando todas las hijas están marcadas, el checkbox madre aparece marcada; cuando todas están desmarcadas, aparece sin marcar; y cuando hay una combinación de ambos estados, muestra el estado mixto utilizando aria-checked="mixed".

Estructura semántica mínima

<fieldset>
  <legend>...</legend>
  <div
    role="checkbox"
    aria-checked="mixed"
    aria-controls="id1 id2 id3 id4 ..."
    tabindex="0"
  >...</div>
  <ul>
    <li>
      <input type="checkbox" id="id1">
      <label for="id1">...</label>
    </li>
    ...
  </ul>
</fieldset>

Agrupa checkbox relacionados y provee nombre accesible al grupo. Utiliza <fieldset> y <legend>.
El checkbox madre (role="checkbox") controla y refleja el estado global de las hijas. Añade aria-checked="mixed" aria-controls="id1 id2 id3".
Las hijas (<input type="checkbox">) seleccionan cada opción individual. Deberán tener un atributo id único y un atributo for que apunte a su id.

El uso de fieldset/legend y de aria-controls hace que la relación jerárquica sea programáticamente determinable, facilitando que los lectores de pantalla anuncien correctamente el contexto

Interacción con el teclado

Tab: desplaza el foco entre todas las casillas (madre e hijas) siguiendo un orden lógico.
Barra espaciadora: en la casilla madre, alterna entre desmarcado → mixto → marcado y sincroniza todas las hijas según el estado resultante. En cada casilla hija, alterna su estado individual (marcado / desmarcado).

Criterios de éxito (SC) asociados al checkbox agrupado

SC	Nombre	Cómo afecta a checkbox agrupado	Nivel
1.3.1, se abrirá en una nueva pestaña	Info and Relationships	El agrupamiento mediante fieldset/legend y la exposición de aria-checked/aria-controls permiten que la estructura y las relaciones sean detectables por tecnologías de asistencia	A
2.1.1, se abrirá en una nueva pestaña	Keyboard	Todo debe poder accionarse con el teclado; la implementación del patrón define la navegación con Tab y el cambio de estado con Barra espaciadora	A
2.4.3, se abrirá en una nueva pestaña	Focus Order	El foco debe seguir un orden que preserve significado; al tabular, primero el checkbox padre y luego las hijas, se mantiene la lógica de grupo	A
4.1.2, se abrirá en una nueva pestaña	Name, Role, Value	Cada casilla expone rol (checkbox), nombre (texto o aria-label/-labelledby) y valor (aria-checked=“true/false/mixed”), permitiendo a los usuarios conocer y modificar su estado	A

Buenas prácticas adicionales

Evita inventar tu propio tri-state en <input type="checkbox">: los checkbox HTML sólo soportan dos estados; usa un contenedor con role="checkbox" y gestiona el atributo aria-checked con JavaScript para los tres estados, como muestra el ejemplo oficial.
Comunica cambios de estado: al modificar hijas desde el checkbox padre (o vice-versa), actualiza inmediatamente los atributos aria-checked correspondientes para que los lectores de pantalla reciban la notificación.
Mantén el enfoque visible: proporciona un estilo de foco con contraste adecuado; evita la transparencia, ya que en modo de alto contraste puede volverse visible y confundir.
No abuses de tabindex: respeta el flujo natural de tabulación para no violar la SC 2.4.3; reservar tabindex="0" para incluir componentes en el orden estándar y evitar valores positivos altos que rompan la lógica de navegación.

Ejemplo de implementación

Referencias

Checkbox Example (Mixed-State), se abrirá en una nueva pestaña