A los elementos con un "[role]" ARIA que requieren que los hijos contengan un "[role]" específico les faltan algunos o todos los hijos requeridos

Users of screen readers and other assistive technologies need information about the behavior and purpose of controls on your web page. Built-in HTML controls like buttons and radio groups come with that information built in. For custom controls you create, however, you must provide the information with ARIA roles and attributes. (Learn more in the Introduction to ARIA.)

Algunas funciones ARIA requieren roles hijos específicos. Por ejemplo, el rol tablist debe poseer al menos un elemento con el rol tab. Si los roles hijos requeridos no están presentes, las tecnologías de asistencia pueden transmitir información confusa sobre su página, como anunciar un conjunto de pestañas sin pestañas.

Cómo identifica Lighthouse las funciones de los hijos faltantes #

Lighthouse marca los roles ARIA que no tienen los roles hijos requeridos:

Lighthouse usa las definiciones de roles de la especificación WAI-ARIA para verificar los elementos de propiedad requeridos, es decir, los roles hijos requeridos. Una página falla en esta auditoría cuando contiene un rol padre al que le faltan sus roles hijos requeridos.

En el ejemplo de auditoría de Lighthouse anterior, el rol radiogroup requiere elementos hijos con el rol radio. Dado que no hay hijos con un radio definido, la auditoría falla. Esto tiene sentido, ya que sería confuso tener un grupo de radio sin botones de radio.

Es importante solucionar este problema ya que puede dañar la experiencia de los usuarios. En el ejemplo anterior, el elemento aún puede anunciarse como un grupo de radio, pero los usuarios no sabrán cuántos botones de radio contiene.

Cómo agregar los roles hijos que faltan #

Consulte las definiciones de roles WAI-ARIA para ver qué roles hijos son necesarios para los elementos marcados por Lighthouse. (La especificación se refiere a los hijos obligatorios como elementos de propiedad obligatorios).

There are two ways to set up the required relationships between ARIA parent and child roles.

Option 1: Place the child elements within the parent in the DOM #

Placing elements with child roles within the parent role element in your HTML is usually the easiest and most maintainable solution. For example:

<div role="tablist">
	<button role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
		Tab 1
	</button>
	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
		Tab 2
	</button>
	<button role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
		Tab 3
	</button>
</div>

Option 2: Associate the child roles with the parent role using aria-owns #

If you can't place child role elements inside the parent role element, you can use the aria-owns attribute to associate them:

<div role="tablist" aria-owns="tab-1 tab-2 tab-3"></div>
…
<button id="tab-1" role="tab" aria-selected="true" aria-controls="tab-1-pane" active>
  Tab 1
</button>
<button id="tab-2" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-2-pane">
  Tab 2
</button>
<button id="tab-3" role="tab" aria-selected="false" tabindex="-1" aria-controls="tab-3-pane">
  Tab 3
</button>

Recursos #

• Código fuente para la auditoría A los elementos con un [role] ARIA que requieren que los hijos contengan un [role] específico les faltan algunos o todos los hijos requeridos
• Ciertos roles de ARIA deben contener ciertos hijos en particular (Deque University)
• Definiciones de roles de la especificación WAI-ARIA