La primera regla: ningún ARIA es mejor que un ARIA incorrecto

ARIA es un conjunto de atributos HTML que indica a las tecnologías de asistencia qué es un elemento y qué hace cuando el marcado por sí solo no puede expresarlo.

Esta es la cuestión: ARIA solo cambia lo que se anuncia. Por sí sola nunca añade clics, foco ni compatibilidad con el teclado.

La primera regla oficial es: si un elemento HTML nativo puede hacer el trabajo, utilícelo en lugar de recrearlo con ARIA.

Un button real puede recibir el foco, se activa con Enter y Espacio y anuncia su función automáticamente. Usted no tiene que programar nada de eso.

Un rol incorrecto miente activamente a los usuarios. La ARIA incorrecta es peor que no usar ARIA: puede ocultar contenido o describirlo de forma incorrecta.

ARIA sobrescribe la semántica nativa. Si añade role=presentation a un encabezado, los lectores de pantalla dejarán de tratarlo como tal.

ARIA proporciona exactamente tres tipos de información: un rol (qué es), estados y propiedades. Ese es todo el conjunto de herramientas.

Establecer aria-hidden en un elemento lo oculta de los lectores de pantalla, pero permanece completamente visible en pantalla. Ambas capas están separadas.

Utilice ARIA cuando no exista ningún elemento nativo adecuado, como en una tablist o un deslizador personalizado. Después, úsela con precisión y pruébela.

Si debe crear un widget personalizado, ARIA y JavaScript deben utilizarse conjuntamente. ARIA le da un nombre y JS proporciona la lógica del foco y del teclado.

Las mejores páginas accesibles suelen utilizar muy poca ARIA. Primero, HTML semántico; ARIA solo para cubrir las carencias restantes.

Aprendió que ARIA describe, nunca se comporta. Prefiera el HTML nativo, añada ARIA solo para cubrir carencias reales y pruébela siempre. 🎯