ID delle etichette ARIA mancanti
Silktide controlla gli elementi che ricavano il proprio da altri elementi tramite ID e segnala i riferimenti a ID che non esistono nella pagina. Un riferimento non valido lascia l'elemento senza il nome che avrebbe dovuto avere.
L'attributo aria-labelledby identifica un
elemento puntando all'id dell'elemento che contiene la relativa etichetta: per esempio,
un'intestazione che identifica una finestra di dialogo o una didascalia che identifica un controllo:
<!-- Problema: il riferimento indica "dialog-label", ma l'id dell'intestazione è "dialog-labell" -->
<h2 id="dialog-labell">Messaggio importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
Perché è importante
Il nome accessibile è ciò che un
annuncia quando un visitatore
raggiunge un elemento. Quando un riferimento aria-labelledby non punta a nulla,
l'elemento potrebbe essere annunciato senza alcun nome: una finestra di dialogo senza nome, un
pulsante senza nome; il visitatore deve quindi indovinarne lo scopo. Questi problemi sono
invisibili: la pagina appare identica e persino test accurati con gli utenti raramente rilevano
un nome che non è stato associato correttamente senza che nulla lo segnali. Gli ID vengono
rinominati e i contenuti ristrutturati, quindi i riferimenti diventano obsoleti nel tempo.
Come risolvere il problema
- Individua l'elemento che avrebbe dovuto fornire il nome e fai in modo che il valore di
aria-labelledbycorrisponda esattamente al suoid(gli ID distinguono tra maiuscole e minuscole):
<!-- Corretto: il riferimento corrisponde all'id dell'intestazione -->
<h2 id="dialog-label">Messaggio importante!</h2>
<div role="dialog" aria-labelledby="dialog-label">
- Se l'elemento che forniva l'etichetta è stato rimosso, ripristinalo oppure usa un attributo
aria-labelcontenente il nome come testo. - Quando un elemento è identificato da diversi altri elementi, elenca tutti gli ID separandoli con spazi e controllali uno per uno.
Come Silktide esegue il controllo
- Individua ogni elemento con un attributo
aria-labelledbyin ciascuna pagina. - Divide il valore dell'attributo in singoli ID.
- Segnala ogni ID referenziato che non esiste in alcun punto della pagina.