Ruolo ARIA padre mancante
Silktide controlla gli elementi il cui ruolo ARIA ha senso solo all'interno di un tipo specifico di contenitore, come una scheda che deve trovarsi all'interno di una barra di schede, e verifica che il contenitore richiesto sia presente.
<!-- Problema: una scheda senza un elenco di schede attorno -->
<button role="tab">Panoramica</button>
<!-- Correzione: racchiudi le schede nel contenitore richiesto -->
<div role="tablist">
<button role="tab">Panoramica</button>
</div>
Perché è importante
I ruoli degli elementi in sono definiti dal loro contesto:
una tab è la terza di cinque schede, una option è una scelta in un elenco, una
row fa parte di una tabella. Gli
derivano dal widget padre la posizione, il numero di elementi e il comportamento di navigazione.
Senza di esso, l'elemento potrebbe essere identificato erroneamente, annunciato senza alcun contesto,
o completamente ignorato: l'autore ha aggiunto metà di un widget e gli utenti non ricevono
in modo affidabile nessuna delle due parti.
Come correggere il problema
- Racchiudi l'elemento in un contenitore con il ruolo richiesto: ad esempio,
inserisci gli elementi
role="tab"all'interno di unrole="tablist". - Se il padre non può racchiudere fisicamente i figli nel codice, aggiungi
aria-ownsal padre logico per adottarli. - Se l'elemento non è realmente quel tipo di elemento, rimuovi o correggi il suo ruolo.
Abbinamenti comuni: tab richiede tablist; option richiede listbox;
menuitem richiede menu o menubar; radio in un gruppo ARIA richiede
radiogroup; treeitem richiede tree; row richiede grid, table,
treegrid o rowgroup; le celle e le intestazioni richiedono row.
Come Silktide esegue questo controllo
- Individua ogni elemento il cui ruolo ARIA richiede un ruolo padre specifico.
- Risale i suoi antenati, seguendo anche eventuali adozioni tramite
aria-owns, alla ricerca di un elemento con un ruolo padre richiesto. - Segnala gli elementi per i quali non viene trovato alcun antenato di questo tipo.
Risoluzione dei problemi
Il ruolo padre è applicato a un elemento con un ruolo implicito
Gli elementi nativi vengono conteggiati: un <option> all'interno di un <select> non richiede
ruoli espliciti, perché entrambi hanno implicitamente i ruoli corretti. I risultati vengono
visualizzati quando viene utilizzato un ruolo esplicito per l'elemento senza alcun padre idoneo,
esplicito o implicito.
Questo controllo non segnala nulla anche se mi aspetto dei risultati
I test ARIA possono essere disattivati per ogni sito web. Controlla le impostazioni avanzate del sito web.