Valore non valido dell'attributo ARIA

Silktide controlla il valore di ogni attributo ARIA nelle tue pagine confrontandolo con i valori consentiti dallo standard. Un attributo con un valore errato, come lo stato di una casella di controllo impostato su "yes" invece di "true", viene ignorato dai browser, quindi lo stato che descrive non viene mai annunciato.

<!-- Problema: "yes" non è un valore valido, quindi lo stato viene ignorato -->
<div role="checkbox" aria-checked="yes">Subscribe</div>

<!-- Correzione: usa il token definito -->
<div role="checkbox" aria-checked="true">Subscribe</div>

Perché è importante

Ogni attributo definisce esattamente quali valori accetta e i browser eliminano qualsiasi altro valore invece di cercare di interpretarlo. Gli errori sono solitamente valori intuitivi, come aria-expanded="1", aria-checked="yes" e aria-level="0", che superano ogni controllo visivo mentre gli utenti delle si trovano davanti a un controllo senza uno stato annunciato: un menu che non comunica mai se è aperto, oppure una casella di controllo che non comunica mai se è selezionata.

Come correggere il problema

Sostituisci i valori informali con i token definiti dall'attributo: true e false invece di yes, no, 1 o 0.
Controlla gli attributi numerici: gli attributi che indicano una posizione, come aria-level e aria-rowindex, iniziano da 1, non da 0.
Rimuovi gli attributi lasciati vuoti, come aria-checked="": se non c'è alcuno stato da comunicare, l'attributo non dovrebbe essere presente.

I valori esatti consentiti da ciascun attributo sono elencati nel riferimento degli attributi ARIA di MDN.

Come Silktide esegue il controllo

Individua ogni elemento della pagina che contiene almeno un attributo aria-.
Controlla il valore di ogni attributo confrontandolo con il tipo definito da ARIA 1.2: attributi true/false, attributi a tre stati come aria-checked (true, false, mixed), numeri e numeri interi, nonché attributi con elenchi di parole predefinite come aria-live e aria-current.
Segnala ogni valore non conforme, indicando cosa era previsto.

Gli attributi che fanno riferimento agli ID degli elementi vengono verificati dai relativi controlli, come ID aria-controls mancante, mentre gli attributi di testo libero come aria-label accettano qualsiasi testo.

Risoluzione dei problemi

Il valore viene impostato da un framework

Le librerie di componenti a volte serializzano gli stati in modo errato, ad esempio generando aria-expanded="undefined". Il problema viene segnalato sull'elemento, ma la correzione di solito riguarda la configurazione del componente o l'aggiornamento della libreria.

Questo controllo non segnala nulla, anche se mi aspetto dei problemi

Il controllo ARIA può essere disattivato per ogni sito web. Controlla le impostazioni avanzate del sito web.