Falta el rol ARIA padre
Silktide comprueba los elementos cuyo rol ARIA solo tiene sentido dentro de un tipo específico de contenedor, como una pestaña que debe estar dentro de una lista de pestañas, y verifica que el contenedor requerido esté presente.
<!-- Problema: una pestaña sin una lista de pestañas (tablist) alrededor -->
<button role="tab">Descripción general</button>
<!-- Solución: envuelve las pestañas en su contenedor requerido -->
<div role="tablist">
<button role="tab">Descripción general</button>
</div>
Por qué es importante
Los roles de elemento en se definen por su contexto:
una tab es la tercera de cinco pestañas, una option es una elección en una lista, una
row forma parte de una tabla. Los
deducen la posición, el recuento y el comportamiento de navegación a partir del componente padre.
Sin él, el elemento puede identificarse mal, anunciarse sin contexto
o incluso omitirse por completo: el autor añadió la mitad de un componente y los usuarios no obtienen
ninguna de las dos mitades de forma fiable.
Cómo solucionarlo
- Envuelve el elemento en un contenedor con el rol requerido; por ejemplo,
coloca los elementos con
role="tab"dentro de unrole="tablist". - Si el elemento padre no puede envolver físicamente a los hijos en el código, añade
aria-ownsen el padre lógico para adoptarlos. - Si el elemento no es realmente de ese tipo, elimina o corrige su rol.
Emparejamientos comunes: tab necesita tablist; option necesita listbox;
menuitem necesita menu o menubar; radio en un grupo de ARIA necesita
radiogroup; treeitem necesita tree; row necesita grid, table,
treegrid o rowgroup; las celdas y los encabezados necesitan row.
Cómo lo comprueba Silktide
- Encontrar cada elemento cuyo rol ARIA requiera un rol padre específico.
- Recorrer sus ancestros, siguiendo también cualquier adopción mediante
aria-owns, en busca de un elemento con el rol padre requerido. - Informar de los elementos en los que no se encuentre dicho ancestro.
Solución de problemas
El rol padre está en un elemento con rol implícito
Los elementos nativos cuentan: un <option> dentro de un <select> no necesita
roles explícitos, porque ambos aportan los roles correctos de forma implícita. Los hallazgos aparecen cuando
se usa un rol de elemento explícito sin ningún padre que lo califique, explícito o
implícito.
Esta comprobación no informa de nada aunque esperaba hallazgos
Las pruebas de ARIA se pueden desactivar por sitio web. Consulta la configuración avanzada del sitio web.