aria-pressed

Cuándo utilizarlo

En un botón que actúa como alternancia: silenciar / activar el sonido, seguir / dejar de seguir, negrita / sin negrita en un editor de texto, barra lateral abierta / barra lateral cerrada. El botón cambia de estado pero no realiza navegación; la etiqueta permanece igual y solo el estado de presionado comunica el cambio.

Son válidos tres valores:

• aria-pressed="false" — la alternancia está desactivada.
• aria-pressed="true" — la alternancia está activada.
• aria-pressed="mixed" — se usa cuando la alternancia controla varios subelementos y estos se encuentran en un estado mixto (algunos activados, otros desactivados). Es poco frecuente en la práctica; la mayoría de los autores prefieren dividirlos en controles separados.

Si el botón no actúa como alternancia —simplemente envía un formulario o abre un modal—, no se debe usar aria-pressed. Se debe usar aria-expanded para controles de divulgación, o ningún atributo de estado para botones de acción simples.

Cómo mantenerlo sincronizado

aria-pressed es un estado, lo que significa que cambia a medida que el usuario interactúa. El controlador de clic que actualiza la apariencia visual del botón también debe actualizar el atributo. Los dos no deben estar nunca en desacuerdo: si el icono muestra «silenciado», aria-pressed debe indicar "true".

<button
  type="button"
  aria-pressed="false"
  onclick="
    const next = this.getAttribute('aria-pressed') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-pressed', next);
    toggleMute(next === 'true');
  "
>
  Mute
</button>

Errores frecuentes

• Establecer aria-pressed en un elemento que no es un botón (un <div> o un <a>). Se debe usar role="button" o, mejor aún, cambiar a <button>.
• Alternar el estado visual con CSS sin actualizar nunca aria-pressed. Los usuarios de lectores de pantalla siguen escuchando el mismo estado.
• Usar aria-pressed="true" en un botón que no alterna (un botón «Enviar»): confunde a la tecnología de asistencia, que anuncia un estado irrelevante.
• Confundir aria-pressed con aria-selected (para elementos en un widget de selección única como una pestaña u opción) o con aria-checked (para casillas de verificación y botones de opción). Cada uno tiene semántica diferente; se debe elegir el que coincida con el patrón del widget.