Regla de accesibilidad: Los atributos ARIA deben ajustarse a nombres válidos

Acerca de esta regla de accesibilidad

Cuando añades un atributo ARIA a un elemento HTML, el navegador expone esa información a través del árbol de accesibilidad para que las tecnologías de asistencia como los lectores de pantalla puedan interpretarla. Si el nombre del atributo es inválido — ya sea por un error tipográfico como aria-hiden en lugar de aria-hidden, o por un atributo inventado como aria-visible que no existe en la especificación — el navegador no lo reconocerá. El atributo es efectivamente código inútil, y la mejora de accesibilidad que pretendías nunca llega al usuario.

Esto se clasifica como un problema crítico porque las consecuencias pueden ser graves. Por ejemplo, si escribes mal aria-required como aria-requried en un campo de formulario, los usuarios de lectores de pantalla no serán informados de que el campo es obligatorio. Si escribes mal aria-expanded en un widget de divulgación, los usuarios ciegos y sordociegos no sabrán si una sección está abierta o cerrada. Los usuarios que solo usan teclado y dependen de lectores de pantalla también se ven afectados cuando los estados e propiedades interactivas no se comunican correctamente.

Criterios de éxito WCAG relacionados

Esta regla se relaciona con el Criterio de éxito WCAG 4.1.2: Nombre, función, valor (Nivel A), que requiere que para todos los componentes de la interfaz de usuario, el nombre, función y estados/propiedades puedan ser determinados programáticamente. Los atributos ARIA inválidos fallan al comunicar estados y propiedades a las tecnologías de asistencia, violando directamente este criterio. Esto aplica a WCAG 2.0, 2.1 y 2.2, así como EN 301 549 (directriz 9.4.1.2).

Cómo solucionarlo

Audita tus atributos ARIA. Revisa cada atributo en tu marcado que comience con aria- y confirma que coincide con un nombre de atributo válido de la especificación WAI-ARIA.
Verifica errores tipográficos. Los errores comunes incluyen aria-labelled-by (correcto: aria-labelledby), aria-hiden (correcto: aria-hidden), y aria-discribedby (correcto: aria-describedby).
Elimina atributos inventados. Atributos como aria-visible, aria-tooltip, o aria-icon no existen en la especificación WAI-ARIA y no tendrán efecto.
Usa herramientas. Las extensiones de IDE, linters (como eslint-plugin-jsx-a11y), y la extensión del navegador axe DevTools pueden detectar nombres de atributos ARIA inválidos durante el desarrollo.

Atributos ARIA válidos comunes

Aquí tienes algunos atributos ARIA frecuentemente utilizados como referencia:

Atributos de widget: aria-checked, aria-disabled, aria-expanded, aria-hidden, aria-label, aria-pressed, aria-readonly, aria-required, aria-selected, aria-valuenow
Atributos de región activa: aria-live, aria-atomic, aria-relevant, aria-busy
Atributos de relación: aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-flowto
Atributos de arrastrar y soltar: aria-dropeffect, aria-grabbed

Ejemplos

Incorrecto: Atributo ARIA mal escrito

<button aria-expandd="false">Mostrar detalles</button>

El atributo aria-expandd no es un atributo ARIA válido. Los lectores de pantalla no anunciarán el estado expandido/contraído de este botón.

Incorrecto: Atributo ARIA inexistente

<div aria-visible="true">Anuncio importante</div>

El atributo aria-visible no existe en la especificación WAI-ARIA. Será completamente ignorado por las tecnologías de asistencia.

Incorrecto: Error tipográfico en un atributo de relación

<input type="text" aria-discribedby="help-text">
<p id="help-text">Introduce tu nombre completo tal como aparece en tu documento de identidad.</p>

El atributo aria-discribedby es un error tipográfico de aria-describedby. La entrada no será asociada con el texto de ayuda para los usuarios de lectores de pantalla.

Correcto: Atributos ARIA escritos correctamente

<button aria-expanded="false">Mostrar detalles</button>

<div aria-hidden="true">Contenido decorativo</div>

<input type="text" aria-describedby="help-text">
<p id="help-text">Introduce tu nombre completo tal como aparece en tu documento de identidad.</p>

Cada uno de estos ejemplos usa un atributo ARIA válido y escrito correctamente que los navegadores y tecnologías de asistencia reconocerán y procesarán según se pretende.

Learn more: