Etikett i navn

Silktide sammenligner teksten besøkende kan se på knapper og lenker, med navnet som hjelpemiddelteknologi bruker for den samme kontrollen. Når de to ikke stemmer overens, kan ikke personer som bruker nettsteder med stemmen, aktivere kontrollen ved å si det de ser.

Hvorfor dette er viktig

Brukere av talegjenkjenning ser på skjermen og sier det de ser: «klikk Send». Programvaren sammenligner disse ordene med navnet til hver kontrolls – navnet bruker. Attributter som aria-label erstatter dette navnet, så en knapp som viser «Send», men er merket med aria-label="Submit", reagerer bare på «klikk Submit». Det synlige ordet fungerer ikke, og brukeren har ingen måte å oppdage det skjulte navnet de skulle ha sagt på.

Uoverensstemmelsen forvirrer også -brukere som samarbeider med seende kolleger, fordi de hører et annet navn enn det personen ved siden av dem ser.

Dette er WCAGs suksesskriterium 2.5.3 (Etikett i navn), et krav på – en del av det mest grunnleggende samsvarsnivået.

Slik løser du det

Fjern -overstyringen når den ikke tilfører noe: En knapp der den synlige teksten allerede sier hva den gjør, trenger ikke aria-label.
Når overstyringen tilfører kontekst, må den begynne med den synlige teksten: aria-label="Read more about pricing" for en «Read more»-lenke gjør at den muntlige kommandoen fortsatt fungerer.
Bruk aldri aria-label til å si noe annet enn den synlige teksten.

<!-- Problem: sier «Send», men reagerer på «Submit» -->
<button aria-label="Submit">Send</button>

<!-- Løsning: Synlig tekst inkludert i det tilgjengelige navnet -->
<button aria-label="Send message">Send</button>

<!-- Enkleste løsning: ingen overstyring i det hele tatt -->
<button>Send</button>

Slik tester Silktide dette

Finn de synlige knappene og lenkene på hver side, inkludert elementer med en ARIA-rolle som button eller link.
Test bare kontroller som overstyrer navnet sitt med aria-label eller aria-labelledby – uten en overstyring er den synlige teksten det tilgjengelige navnet, og kriteriet er automatisk oppfylt.
Les kontrollens synlige etikett: tekstinnholdet pluss til eventuelle bilder i den. Etiketter som er kortere enn 2 tegn, hoppes over, i likhet med kontroller som har et tomt tilgjengelig navn (et separat problem som dekkes av andre kontroller).
Normaliser begge tekststrengene – gjør bokstavene små, slår sammen mellomrom og fjerner dekorativ tegnsetting – og krev deretter at den synlige etiketten forekommer i det tilgjengelige navnet.
For lenker i kortformat som inneholder en overskrift og støttetekst godtas overskriften som etiketten i stedet, siden det er teksten en besøkende naturlig ville sagt.

Feilsøking

Det tilgjengelige navnet er lengre enn den synlige teksten

Det er helt greit, så lenge den synlige teksten forekommer i det. WCAG anbefaler at det tilgjengelige navnet begynner med den synlige teksten, men denne kontrollen godtar enhver plassering.

Skjemafelt testes ikke

Tekstfelt og andre skjemafelt henter den synlige etiketten sin fra et <label>-element i stedet for fra sin egen tekst. Derfor dekkes de av separate etikettkontroller, ikke denne kontrollen.