aria-required-children
Los roles contenedores deben incluir al menos un hijo con uno de los roles requeridos
Comprueba que los roles contenedores con una entrada documentada de "required owned elements" (list, listbox, menu, radiogroup, table, grid, tablist, tree, row, ...) contengan al menos un descendiente o elemento referenciado mediante aria-owns con uno de los roles aceptables para ese contenedor.
Ámbito de aplicación. Se aplica a elementos con un rol explícito, válido y no abstracto que además sea uno de los roles contenedores con una entrada documentada de "required owned elements" (list, listbox, menu, menubar, radiogroup, rowgroup, table, grid, treegrid, tablist, tree, row). El contenedor necesita su rol explícito, pero un elemento poseído puede tomar su rol de los ElementInternals de un elemento personalizado (this.attachInternals().role), igual que un elemento nativo poseído toma el de su etiqueta.
Resultado esperado. Al menos un descendiente, o un elemento referenciado mediante aria-owns, tiene uno de los roles aceptables para ese rol contenedor. Un contenedor sin ninguno que incluye texto, directamente o a través de envoltorios genéricos (un <span> o <div> sin rol), FALLA: el texto está donde deberían estar sus hijos requeridos, como en una lista cuyos elementos no tienen rol (ACT bc4a75, Failed Example 1). Por uno que no incluye nada se pregunta (cantTell): no transmite nada falso; un role="list" vacío se anuncia como una lista sin elementos, que es lo que es, y un script puede llenarlo. Si el contenido que un contenedor sí incluye es VÁLIDO es decisión de aria-prohibited-children, y esa regla sigue fallando, de modo que una estructura mal descrita (un role="button" entre elementos de lista, un tablist de simples buttons) se detecta con la misma fuerza que antes. Los equivalentes HTML nativos ya funcionan así: nada en este conjunto de reglas hace fallar un <ul> vacío, y list-children-valid solo evalúa los hijos que existen.
Qué informa un hallazgo.
role: el rol del contenedor.requiredOwnedRoles: los roles de los que necesita al menos un hijo. Cada elemento es un nombre de rol.
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
<ul role="list"><li>Item</li></ul>
El rol list incluye al menos un hijo con rol listitem.
<div role="list"></div>
Un role="list" vacío no incluye ningún rol hijo requerido; se anuncia como una lista sin elementos, que es lo que es, pero merece un vistazo.
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_REQUIRED_CHILD_MISSING
- Inspeccionar el contenedor que indica el informe y anotar su rol y los roles hijos que necesita (como listitem para list, option para listbox).
- Observar lo que muestra en pantalla: comprobar si está vacío o contiene imágenes, iconos o controles.
- Interactuar con la página (abrir menús, cargar resultados) y comprobar si más tarde se añaden hijos con el rol requerido.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar los roles de todo lo que contiene.
Se cumple. El contenedor está vacío y no transmite nada, o los elementos que muestra tienen el rol requerido.
No se cumple. Muestra elementos (imágenes, iconos, controles) que carecen del rol hijo requerido, así que la estructura no se transmite, lo que incumple WCAG 1.3.1 (ACT bc4a75).