Elementos com um ARIA [role] que exigem que os filhos contenham um [role] específico estão faltando alguns ou todos os filhos necessários

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.)

Algumas funções ARIA requerem funções secundárias específicas. Por exemplo, a tablist deve possuir pelo menos um elemento com a função tab. Se as funções secundárias necessárias não estiverem presentes, as tecnologias assistivas podem transmitir informações confusas sobre sua página, como anunciar um conjunto de guias sem guias.

Como o Lighthouse identifica funções filhas ausentes #

O Lighthouse sinaliza funções ARIA que não têm as funções filho necessárias:

O Lighthouse usa as definições de função da especificação WAI-ARIA para verificar os elementos de propriedade necessários - ou seja, funções filho obrigatórias. Uma página falha nesta auditoria quando contém uma função pai que esteja sem suas funções filho necessárias.

No exemplo de auditoria Lighthouse acima, a função radiogroup requer elementos filho com a função radio. Como não há filhos com uma radio definida, a auditoria falha. Isso faz sentido, pois seria confuso ter um grupo de opção sem botões de opção.

É importante corrigir esse problema, pois ele pode interromper a experiência dos usuários. No exemplo acima, o elemento ainda pode ser anunciado como um grupo de opção, mas os usuários não saberão quantos botões de opção ele contém.

Como adicionar funções filhas secundárias #

Consulte as definições de função WAI-ARIA para ver quais funções filhas são necessárias para os elementos que o Lighthouse sinalizou. (A especificação refere-se a filhas obrigatórias como elementos de propriedade obrigatórios.)

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 #

• O código-fonte para a auditoria Elementos com um ARIA [role] que exigem que as filhas contenham uma [role] específica estão faltando alguns ou todos as filhas necessárias
• Certas funções ARIA devem conter filhas específicas (Deque University)
• Definições de função da especificação WAI-ARIA