ARIA (Accessible Rich Internet Applications) es un conjunto de atributos que añade semántica de accesibilidad — roles, estados y propiedades — que el HTML nativo no puede expresar. Pero la regla más importante de ARIA es: prefiere HTML nativo primero.
Save
Save
Los elementos nativos vienen con roles correctos, comportamiento del teclado y enfoque gratis. Recurre a ARIA solo cuando ningún elemento nativo hace el trabajo.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Este es ARIA genuinamente útil: informar a los lectores de pantalla sobre contenido que cambia sin recargar la página (resultados de búsqueda, notificaciones, errores de validación).
ARIA incorrecto es peor que ninguno — proporciona información falsa a los usuarios de lectores de pantalla. Y ARIA solo cambia semántica, nunca comportamiento: role="button" en un <div> no lo hace enfocable o clickeable; debes agregar tabindex y controladores de teclas tú mismo.
Usa HTML semántico para el caso del 95%; usa ARIA para llenar los vacíos para widgets personalizados (pestañas, cuadros combinados, menús) y para anunciar actualizaciones dinámicas a través de regiones en vivo.
Sigue las reglas — prefiere lo nativo, no cambies la semántica nativa innecesariamente, mantén los estados sincronizados y nunca apliques un rol que no implementes completamente.