aria-checked

Cuándo usar

En widgets que tienen semántica de marcado binario o triestado: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" y role="switch". Si utiliza el elemento nativo <input type="checkbox"> o <input type="radio">, el navegador ya expone el estado de marcado a la tecnología de asistencia — no lo duplique con aria-checked.

Distíngalo de los estados adyacentes:

• aria-checked — para «esta opción está seleccionada en un conjunto de opciones, a menudo de forma independiente de las demás». Casillas de verificación y botones de opción.
• aria-pressed — para botones de alternancia (silenciar / activar sonido). El elemento es conceptualmente un botón; el estado indica si la acción está activa en ese momento.
• aria-selected — para elementos dentro de un contenedor de selección única como tablist, listbox o tree. El estado pertenece al modelo de selección del contenedor, no al propio elemento.

Cómo mantenerlo sincronizado

Los valores válidos son "true", "false", "mixed" e "undefined". Use "mixed" solo en una casilla padre que resume un grupo de casillas secundarias en estados inconsistentes (el patrón clásico indeterminado de «seleccionar todo»). "undefined" es poco frecuente en la práctica; la mayoría de los autores usan "false" en su lugar.

El atributo debe reflejar lo que ve el usuario. El manejador de clic y teclado que actualiza la marca visual debe también escribir el nuevo valor de aria-checked en la misma ruta de código. Nunca aplique estilos de apariencia «marcada» desde CSS sin actualizar el atributo.

Para role="radio" dentro de un radiogroup, exactamente una opción debe llevar aria-checked="true" en todo momento; las demás deben ser "false" (no ausentes).

Errores frecuentes

• Omitir aria-checked por completo en un elemento role="checkbox" — el lector de pantalla anuncia «checkbox» sin estado alguno.
• Alternar una clase para mostrar la marca pero sin actualizar nunca aria-checked.
• Usar aria-checked="true" en un <input type="checkbox"> nativo — el navegador lo ignora y el estado duplicado puede desincronizarse.
• Establecer aria-checked="mixed" en una sola casilla en lugar de en un padre que resume los elementos secundarios.
• Dejar los botones de opción hermanos sin aria-checked="false" — la tecnología de asistencia no puede inferir el estado no marcado.
• Confundir aria-checked con aria-selected en opciones de listbox o pestañas.

Ejemplo

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Preferencias de correo electrónico</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Enviarme resúmenes semanales
  </div>
</div>