aria-roles-valid
El atributo role debe ser un rol ARIA válido y no abstracto
Comprueba que un atributo role="" explícito se resuelva en un rol WAI-ARIA real y no abstracto.
Ámbito de aplicación. Se aplica a cualquier elemento con un atributo role="" no vacío en el DOM compuesto.
Resultado esperado. Al menos un token de rol nombra un rol ARIA concreto y no abstracto. Se gradúa según a qué recurre el elemento cuando ninguno lo hace:
failen un anfitrión sin rol (div, span, elemento personalizado) que toma el foco, que queda expuesto como generic: un control cuyo rol no puede determinarse mediante programación (SC 4.1.2, F59).cantTellen un anfitrión sin rol que no toma el foco. La infracción de WAI-ARIA es segura, pero que perder el rol que quiso el autor haga fallar un criterio depende de la página:<div role="heding">falla el SC 1.3.1 solo si se muestra como un encabezado. ACT 674b10 no asocia la regla a ningún requisito de WCAG para la conformidad.cantTellcuando el elemento tiene un rol nativo (un <button>, <nav>, <a href>), que el árbol de accesibilidad sigue usando. ACT 674b10 enumera el 4.1.2 solo como un requisito secundario, "satisfecho mediante el rol implícito", por lo que el token incorrecto merece señalarse, pero no constituye en sí mismo el criterio que falla.
Qué informa un hallazgo.
role: el primer token del atributo role. Ningún token de él es un rol conocido, o los conocidos son todos abstractos.nativeRole(el casocantTell): el rol nativo del elemento, que la tecnología de asistencia sigue usando.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<div role="button">Click</div>
"button" es un rol ARIA real y concreto.
<div role="buton" tabindex="0">Save</div>
"buton" no es un token de rol ARIA definido (error tipográfico), así que un control que toma el foco se queda sin rol.
<div role="heding">Orders</div>
"heding" tampoco es un token de rol ARIA definido, pero el elemento no toma el foco: que perder el rol de encabezado haga fallar WCAG depende de si la página lo muestra como un encabezado.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
ARIA_ROLE_ABSTRACT
- Inspeccionar el elemento que indica el informe y anotar el rol abstracto (como landmark, widget, command) y su etiqueta.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar el rol que se expone en su lugar (el rol nativo).
- Decidir si el rol nativo es un tipo concreto del rol abstracto indicado (un nav para landmark, un botón para widget).
Se cumple. El rol nativo es una forma concreta de lo que indicó el autor, así que el elemento se sigue exponiendo correctamente (aun así, quitar el rol abstracto).
No se cumple. El rol nativo no coincide con la intención (como un botón marcado como landmark), así que el rol pretendido nunca se expone, lo que incumple WCAG 4.1.2 (ACT 674b10).
ARIA_ROLE_INVALID
- Inspeccionar el elemento que indica el informe y anotar el valor de rol desconocido y su etiqueta.
- Deducir qué rol se pretendía probablemente (por ejemplo, «buton» por button).
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar el rol que se expone en su lugar (el rol nativo del elemento).
- Comparar el rol expuesto con el que se pretendía y con el comportamiento del elemento.
Se cumple. El rol nativo expuesto es el que se pretendía, así que los usuarios reciben el rol correcto (aun así, corregir la errata).
No se cumple. El rol pretendido difiere del expuesto, así que los usuarios reciben un rol erróneo, lo que incumple WCAG 4.1.2 (ACT 674b10).