Respuesta corta: un botón de alternancia enciende y apaga algo y le dice al lector de pantalla en qué estado está. Deja su etiqueta fija y añade aria-pressed, o deja que la etiqueta cambie y no uses aria-pressed. Para un ajuste que se activa o se desactiva, usa role="switch" con aria-checked, o una casilla de verificación.
Formas de decir activado o desactivado
| Patrón | Qué anuncia el lector | Cuándo usarlo |
|---|---|---|
| Un botón con aria-pressed | Su nombre fijo, pulsado o no | Una etiqueta que no cambia, como Silenciar |
| Un botón cuyo nombre cambia | Solo el nombre nuevo | Reproducir y Pausar, Mostrar y Ocultar |
| role="switch" con aria-checked | Su nombre, activado o desactivado | Un ajuste que se enciende o se apaga |
| Una casilla de verificación | Su nombre, marcada o no | Una opción, a menudo con estilo de interruptor |
| aria-pressed="mixed" | Pulsado a medias | Un botón sobre elementos en estados distintos |
De MDN y de las prácticas de autoría de ARIA del W3C, en inglés, consultados el 5 de noviembre de 2026.
El W3C señala que estos patrones a menudo se pueden intercambiar: elige el que encaje con el control. Una luz se entiende mejor como encendida o apagada que como marcada o desmarcada.
aria-pressed deja la etiqueta fija
MDN explica que aria-pressed convierte un botón en un botón de alternancia. Puede valer true, false o mixed, y cada pulsación completa lo cambia.
El ejemplo del W3C es un botón Silenciar en un reproductor de audio, pulsado mientras el sonido está apagado. La regla que lo acompaña: la etiqueta no debe cambiar cuando cambia el estado. MDN lo dice claro: si quieres que la etiqueta cambie entre Reproducir y Pausar, no uses aria-pressed.
Interruptores: activado o desactivado
MDN describe el rol switch como una casilla de verificación que dice activado y desactivado en lugar de marcada y desmarcada. aria-checked es obligatorio: true es activado, false es desactivado.
El patrón del W3C añade que un interruptor tampoco cambia de etiqueta al cambiar de estado. Espacio lo cambia, Enter es opcional, y el interruptor solo tiene dos valores.
Empieza por HTML
MDN recuerda la primera regla de ARIA: si HTML ya tiene un elemento con el significado y el comportamiento que buscas, tómalo antes de añadir un rol. Una casilla de verificación con estilo de interruptor suele ser la respuesta más sencilla.
Un elemento button nativo incluye Enter y Espacio por defecto, como explica nuestra guía de botón o enlace. Cuándo merece la pena ARIA lo trata nuestra guía sobre qué es ARIA.
Cómo hacer un botón de alternancia
- Decide si la etiqueta cambia con el estado o se queda igual.
- Para una etiqueta fija, usa un botón con aria-pressed en true o false.
- Para una etiqueta que cambia, usa un botón normal y sin aria-pressed.
- Para un ajuste, usa una casilla de verificación o role="switch" con aria-checked.
- Actualiza el estado en el mismo script que cambia lo que se ve.
- Comprueba que funciona Espacio, y Enter en los botones.
- Compara el nombre y el estado del árbol de accesibilidad con lo que se ve.
Nuestros propios botones de alternancia
El 5 de noviembre de 2026 leímos con Chrome, en su árbol de accesibilidad, los tres controles de dos estados de nuestras guías, en los dos idiomas. Cada uno sigue un patrón distinto de esta guía.
El botón de tema del encabezado cambia su nombre: «Cambiar a modo oscuro» pasa a «Cambiar a modo claro» al pulsarlo. No tiene estado de pulsado, que es lo correcto para una etiqueta que cambia. Los interruptores de las preferencias de cookies usan el rol switch con aria-checked: «Analítica» mantiene su nombre mientras su estado pasa de activado a desactivado y vuelve.
El botón para reproducir el audio hacía las dos cosas hasta esa mañana. aria-pressed pasaba de false a true mientras su nombre cambiaba de «Reproducir la versión en audio» a «Pausar». Quitamos aria-pressed, y ahora el nombre solo dice qué hace el botón.
Antes de publicar
- Ningún control cambia su etiqueta y lleva aria-pressed a la vez.
- Los botones con aria-pressed mantienen una sola etiqueta.
- Los interruptores tienen role="switch" y un aria-checked al día.
- El estado del código coincide siempre con el de la pantalla.
- Espacio funciona en cada botón de alternancia, y Enter en los botones.
- Primero se pensó en un elemento nativo.
RecuerdaDi el estado una sola vez. O cambia la etiqueta, o habla un estado de pulsado o marcado, nunca las dos cosas a la vez.
Nuestro servicio de diseño web revisa controles como estos con el árbol de accesibilidad antes de publicar.
Respuestas rápidas sobre los botones de alternancia
¿Qué diferencia hay entre un botón de alternancia y un interruptor?
Los dos tienen dos estados. El W3C señala que un interruptor solo puede estar encendido o apagado, mientras que un botón de alternancia puede admitir además un estado intermedio. Elige el que encaje: pulsado para un botón como Silenciar, encendido y apagado para un ajuste.
¿Puede un botón de alternancia cambiar su etiqueta?
No si usa aria-pressed. MDN dice que no se cambie la etiqueta cuando cambia el estado: un botón Pausa sigue siendo Pausa, pulsado o no. Si quieres que la etiqueta cambie entre Reproducir y Pausar, no uses aria-pressed.
¿Qué significa aria-pressed="mixed"?
Que los elementos que controla el botón no tienen todos el mismo valor. MDN lo da como el tercer valor de aria-pressed, junto a true y false. Un interruptor no puede usarlo: MDN dice que el rol switch no admite mixed.
¿Uso mejor una casilla de verificación?
Muchas veces, sí. MDN cita la primera regla de ARIA: usa una función nativa de HTML que ya tenga el comportamiento que necesitas. El W3C incluso muestra interruptores hechos con una casilla de verificación, con estilo de interruptor.
¿Qué teclas deben funcionar en un botón de alternancia?
Espacio y Enter activan un botón, también uno de alternancia, según el patrón de botón del W3C. En un interruptor, el W3C pide Espacio y deja Enter como opcional.
Fuentes
Consultadas el 5 de noviembre de 2026. En inglés: Iniciativa de Accesibilidad Web del W3C, Switch Pattern y Button Pattern; MDN Web Docs, ARIA: aria-pressed attribute y ARIA: switch role. Nuestro caso: nuestras propias páginas, leídas en un navegador el 5 de noviembre de 2026.