Etiket i navn

Silktide sammenligner den tekst, besøgende kan se på knapper og links, med det navn, som hjælpeteknologi bruger til det samme kontrolelement. Når de to ikke stemmer overens, kan personer, der betjener websites med stemmen, ikke aktivere kontrolelementet ved at sige det, de ser.

Hvorfor dette er vigtigt

Brugere af talegenkendelse ser på skærmen og siger det, de ser: "klik på Send". Softwaren matcher disse ord med hvert kontrolelements – det navn, som bruger. Attributter som aria-label erstatter dette navn, så en knap, der viser "Send", men har etiketten aria-label="Submit", kun reagerer på "klik på Submit". Det synlige ord fejler uden varsel, og brugeren har ingen mulighed for at finde frem til det skjulte navn, som de skulle have sagt.

Uoverensstemmelsen forvirrer også brugere af , der arbejder sammen med seende kolleger, fordi de hører et andet navn end den person ved siden af dem ser.

Dette er -succeskriterium 2.5.3 (Etiket i navn), et krav på – en del af det mest grundlæggende niveau for overensstemmelse.

Sådan løser du det

Fjern -tilsidesættelsen, hvor den ikke tilføjer noget: En knap, hvis synlige tekst allerede fortæller, hvad den gør, behøver ikke aria-label.
Når tilsidesættelsen tilføjer kontekst, skal den starte med den synlige tekst: aria-label="Read more about pricing" for et "Read more"-link bevarer den talte kommando.
Brug aldrig aria-label til at angive noget andet end den synlige tekst.

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

<!-- Løsning: synlig tekst er med i det tilgængelige navn -->
<button aria-label="Send message">Send</button>

<!-- Den enkleste løsning: ingen tilsidesættelse overhovedet -->
<button>Send</button>

Sådan tester Silktide dette

Find de synlige knapper og links på hver side, herunder elementer med en ARIA-rolle som button eller link.
Test kun kontrolelementer, der tilsidesætter deres navn med aria-label eller aria-labelledby – uden en tilsidesættelse er den synlige tekst det tilgængelige navn, og kriteriet er automatisk opfyldt.
Læs kontrolelementets synlige etiket: dets tekstindhold plus den for eventuelle billeder i det. Etiketter med færre end 2 tegn springes over, ligesom kontrolelementer med et tomt tilgængeligt navn (et separat problem, der dækkes af andre tjek).
Normaliser begge strenge – konverter til små bogstaver, sammentræk mellemrum og fjern dekorativ tegnsætning – og kræv derefter, at den synlige etiket forekommer i det tilgængelige navn.
For kortlignende links, der indeholder en overskrift plus supplerende tekst, accepteres overskriften i stedet som etiketten, da det er den tekst, en besøgende naturligt ville sige.

Fejlfinding

Det tilgængelige navn er længere end den synlige tekst

Det er fint, så længe den synlige tekst indgår i det. WCAG anbefaler, at det tilgængelige navn starter med den synlige tekst, men enhver placering består dette tjek.

Formularfelter testes ikke

Tekstinput og andre formularfelter får deres synlige etiket fra et <label>- element frem for deres egen tekst, så de dækkes i stedet af separate tjek af etikettering.