ARIA5Comunicar el estado de un componente con atributos ARIA

Por qué es importante

Una persona que ve la pantalla nota que el menú se ha desplegado o que el botón de silencio está activado. Quien usa un lector de pantalla (programa que lee en voz alta la pantalla) solo sabe lo que el código le dice.

Sin estos atributos, oirá «botón Menú» y no sabrá si el menú está abierto. Si el atributo existe pero no se actualiza, es peor: recibirá información falsa.

Cómo se hace

1. Identifique qué estados tiene el componente: abierto o cerrado, marcado o no, valor actual.
2. Use el atributo adecuado: aria-expanded para desplegables, aria-pressed para botones de activar y desactivar, aria-checked para casillas propias y aria-selected para pestañas.
3. Ponga los atributos obligatorios de cada rol. Por ejemplo, un role="slider" necesita aria-valuenow, y conviene darle aria-valuemin y aria-valuemax.
4. No use atributos que el rol no admite. La especificación WAI-ARIA indica cuáles admite cada uno.
5. Cambie el valor con JavaScript en el mismo momento en que cambia lo que se ve.

Cómo comprobarlo

1. Abra las herramientas del navegador (F12), seleccione el componente y mire sus estados en el panel «Accesibilidad».
2. Use el componente con el ratón o el teclado. Compruebe en el código que el valor del atributo cambia, por ejemplo de false a true.
3. Revise que están los atributos obligatorios del rol y que no sobra ninguno. Herramientas como axe o WAVE avisan de muchos de estos errores.
4. Con un lector de pantalla, active el componente. Debe oír el nuevo estado: «pulsado», «expandido» o el nuevo valor.

Ejemplo

Botón para silenciar un vídeo que indica si el silencio está activado.

<button type="button" id="silencio" aria-pressed="false">Silenciar</button>
<script>
  const boton = document.getElementById('silencio');
  boton.addEventListener('click', () => {
    const activo = boton.getAttribute('aria-pressed') === 'true';
    boton.setAttribute('aria-pressed', String(!activo));
  });
</script>