Estados y propiedades: expanded, checked, disabled

Un rol indica qué es un elemento. Los estados y las propiedades indican cómo se comporta actualmente: ¿está abierto, marcado, ocupado o no disponible?

Un estado cambia cuando el usuario interactúa, como sucede al alternar expanded. Una propiedad tiende a permanecer estable, como el indicador required de un control.

aria-expanded indica a los usuarios si la región de un control está abierta. Debe cambiarlo en JavaScript cada vez que cambie el estado.

aria-checked informa de si una casilla de verificación o un interruptor personalizado está activado. Una casilla de verificación nativa ya lo anuncia automáticamente.

En los controles de formulario reales, el atributo HTML disabled los excluye del foco y los anuncia automáticamente como no disponibles.

aria-disabled anuncia que un control personalizado está desactivado, pero no bloquea los clics. Aun así, debe detener la acción en el código.

aria-selected marca el elemento elegido en un tablist, listbox o grid para que los usuarios sepan qué opción está activa.

Un botón de alternancia usa aria-pressed para indicar si está activado o desactivado, como un botón de negrita que permanece iluminado mientras el texto está en negrita.

El error número uno son los estados obsoletos. Si cambia el aspecto visual, pero aria-expanded sigue siendo false, los usuarios de lectores de pantalla oyen información incorrecta.

Algunos estados contienen números. Un control deslizante expone su posición mediante aria-valuenow, además de aria-valuemin y aria-valuemax para indicar el intervalo.

Dos propiedades de formulario útiles: aria-required indica que un campo es obligatorio, y aria-invalid anuncia que no ha superado la validación.

Ha aprendido que los estados y las propiedades describen la condición de un elemento. Prefiera los atributos nativos y mantenga siempre los estados ARIA sincronizados con la interfaz.