Normativas · ARIA

Rol Control

switch

Marca un elemento como interruptor de encendido/apagado. Funcionalmente similar a una casilla de verificación, pero se anuncia como "switch, encendido" o "switch, apagado" en lugar de "marcado" — encaja mejor con un control de alternancia en ajustes. Todavía no existe un equivalente HTML nativo.

Cuándo utilizarlo

Para un control de ajuste binario donde «encendido» y «apagado» describen el estado mejor que «marcado» y «no marcado» — Wi-Fi, modo oscuro, notificaciones, modo avión. No existe un elemento HTML nativo de tipo switch, por lo que hay dos enfoques válidos:

  1. <button type="button" role="switch" aria-checked="false"> — preferido, ya que se hereda el foco y la activación nativos del botón.
  2. <input type="checkbox" role="switch"> — también aceptable; el envío del formulario sigue funcionando y la sustitución del rol cambia la forma en que las tecnologías de asistencia lo anuncian.

No se debe usar role="switch" para elementos que no sean verdaderamente binarios. Si la acción navega, abre un menú o inicia un proceso, se debe usar button o link.

Contrato de teclado y foco

Según el patrón switch de la APG:

  • Tab desplaza el foco al switch.
  • Espacio alterna aria-checked. Intro DEBE también alternarlo (la APG recomienda ambas teclas, ya que los usuarios esperan un comportamiento similar al de un botón en un switch basado en botón).
  • El foco permanece en el switch después de alternarlo.

aria-checked solo acepta "true" o "false" en un switch — "mixed" no es válido aquí.

Errores frecuentes

  • role="switch" sin aria-checked en el primer renderizado. El estado es obligatorio.
  • aria-checked="mixed" en un switch. Solo es válido para checkbox.
  • Usar aria-pressed en lugar de aria-checked. aria-pressed pertenece a un botón de alternancia (silenciar/activar sonido), donde el botón realiza una acción. Un switch representa el estado de un ajuste.
  • Un switch que no actualiza aria-checked cuando se alterna solo mediante CSS.
  • Áreas de interacción demasiado pequeñas que incumplen WCAG 2.5.8 Tamaño del objetivo. El área interactiva debe alcanzar 24×24 píxeles CSS.

Ejemplo

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Modo oscuro
</button>