Controllo con sola icona
Silktide cerca pulsanti e link etichettati solo tramite un'icona, come una croce di chiusura, un menu hamburger o una lente di ricerca, senza un nome testuale associato per le persone che non possono vedere l'icona.
<!-- Problema: non viene annunciato cosa fa questo pulsante -->
<button><svg>…</svg></button>
<!-- Soluzione: assegna un nome al controllo -->
<button aria-label="Open menu"><svg>…</svg></button>
Perché è importante
Gli utenti vedenti capiscono cosa fa un pulsante con un'icona dalla sua forma e dal contesto. Gli utenti di non hanno un'alternativa equivalente: senza un , il loro software annuncia un "pulsante" o un "link" senza nome, oppure legge codice residuo come il nome della classe CSS dell'icona. Ogni controllo con sola icona senza nome è un controllo che questi utenti devono attivare alla cieca oppure saltare del tutto, e spesso si tratta dei controlli più importanti della pagina: menu, ricerca, chiusura, successivo.
Come risolvere il problema
- Aggiungi un'etichetta che descriva cosa fa il controllo,
non l'aspetto dell'icona:
aria-label="Search", nonaria-label="Magnifying glass". - Se la stessa dicitura è già presente come testo visibile nelle vicinanze,
indica quel testo con
aria-labelledbyinvece di duplicarlo. - Se l'icona è un
<img>, anche un testoaltsignificativo le assegna un nome al controllo. - Se il controllo non svolge alcuna funzione utile ed esiste solo a scopo decorativo, rendilo non interattivo invece di assegnargli un nome.
Come esegue i controlli Silktide
- Individua i pulsanti, i link e i controlli di apertura e chiusura visibili
in ogni pagina, inclusi gli elementi con
role="button"orole="link". - Ignora i controlli che hanno già un nome: testo visibile di almeno 2
caratteri, un attributo
aria-label,aria-labelledbyotitle. - Controlla se i controlli rimanenti contengono un'icona: un SVG inline,
un'immagine con testo
altvuoto oppure testo visualizzato con un font per icone riconosciuto. - Segnala i controlli che mostrano un'icona ma non hanno un nome.
Risoluzione dei problemi
Il controllo è etichettato in un altro modo
Silktide considera aria-label, aria-labelledby, title, il testo visibile
e il testo alt delle immagini. Se il controllo ha un nome tramite un
meccanismo diverso da questi, eventualità rara, verifica con un lettore di
schermo che il nome venga effettivamente annunciato e
la segnalazione se è così.
L'icona è decorativa ed è affiancata da un testo
I controlli con testo visibile significativo non vengono segnalati, anche quando un'icona è affiancata al testo. Se un controllo è stato segnalato, il suo testo non raggiungeva 2 caratteri significativi: un testo composto da un solo glifo, come "×", non conta come etichetta.