Aria Children

Tutti i componenti della vostra pagina web hanno (o dovrebbero avere) un ruolo e uno scopo.

Accessibility

Mancanza di "children" richiesti per gli elementi con un ARIA [role].

Tutti i componenti della pagina web hanno (o dovrebbero avere) un comportamento e uno scopo che devono essere chiari a tutti gli utenti che hanno bisogno di tecnologie assistive o di lettori per navigare.

Per impostazione predefinita, i controlli già costruiti nell'HTML possiedono le informazioni necessarie, ma tutto ciò che aggiungete voi stessi deve avere ruoli e attributi ARIA.

Per quanto riguarda i ruoli, alcuni di questi devono avere ruoli "children" specifici; in caso contrario, è complicato per le tecnologie assistive fornire informazioni sulla pagina.

Come SeoChecker segnala i ruoli di "children" mancanti

Se i ruoli ARIA non hanno ruoli figlio obbligatori, SeoChecker li visualizza.

SeoChecker utilizza le definizioni di ruolo della specifica WAI-ARIA per controllare gli elementi di proprietà richiesti.

Come posso aggiungere i ruoli "children"mancanti?

Avete due alternative:

1. All'interno del DOM, posizionare gli elementi figli all'interno degli elementi genitori.

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

2. Utilizzate l'attributo aria-owns per associare i ruoli figli e i ruoli genitori.

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