Etiket i navn

Hvad det kræver

Hvis en knap viser „Indsend ansøgning“ på skærmen, skal en stemmestyringsbruger kunne sige „klik på Indsend ansøgning“ og få klikket til at lande. Det virker kun, når den synlige etiket er indeholdt i det tilgængelige navn — ideelt som de første ord. Hvis det tilgængelige navn er „Send formular“, mens den synlige tekst siger „Indsend ansøgning“, mislykkes stemmkommandoen uden fejlmeddelelse.

WCAG kræver, at den synlige tekstetiket er en del af det tilgængelige navn. Det tilgængelige navn kan indeholde mere (præciserende kontekst), men den synlige tekst skal være med i samme ordrækkefølge.

Sådan opfyldes det

• For knapper og links med tekst gøres intet særligt — tekstindholdet bliver automatisk det tilgængelige navn.
• Når du tilføjer aria-label til et element, der allerede har synlig tekst, inkludér den synlige tekst i starten: <button aria-label="Indsend ansøgning — åbner bekræftelse">Indsend ansøgning</button>.
• For ikon + tekst-knapper lad teksten styre navnet. Overskriv det ikke med en ikon-only aria-label.
• For links, hvor teksten lyder „Læs mere“, udvid det tilgængelige navn med aria-label="Læs mere om WCAG 2.2 — fuld artikel", så det synlige „Læs mere“ stadig er præfiks.
• Når et elements synlige etiket er et billede (ikon med tekstoverlay, logo), sørg for at alt matcher den synlige tekst præcist.

Typiske fejl

• En knap, der viser „Søg“, med aria-label="Find". Stemmebrugere siger „klik på Søg“ — intet sker.
• „Læg i kurv“-knapper med aria-label="Læg blå T-shirt størrelse M i din indkøbskurv" — langt navn, og det synlige „Læg i kurv“ er ikke længere præfiks. Stemmkommandoen „klik på Læg i kurv“ rammer ikke.
• Ikon-og-tekst-knapper, hvor designeren tilføjede aria-label="kurv-ikon" og overskrev den synlige „Til kassen“-tekst.
• Lokaliserede sider, hvor den synlige tekst er oversat, men aria-label stadig er på engelsk.
• Svevende handlingsknapper, der viser „Chat“ synligt, men har aria-label="Åbn supportwidget".

Hvorfor det er vigtigt

Dette er det succeskriterium, der definerer tilgængelighed for stemmestyringsbrugere — mennesker, der bruger Dragon NaturallySpeaking, Voice Control på iOS/macOS, Voice Access på Android eller Windows Speech Recognition. For disse brugere er den synlige etiket kommandoen. En uoverensstemmelse er ikke en mindre ulempe; det er forskellen på brugbart og ubrugeligt. Det hjælper også skærmlæserbrugere, når en siddende hjælper siger „klik på Gem-knappen“ — meddelelsen matcher ordene på skærmen. 2.5.3 er nem at rette og nem at overse, fordi automatiserede værktøjer sjældent markerer den: en udvikler, der læser koden, ser en aria-label og antager, at det er godt nok. Kontrollér altid det tilgængelige navn op mod den synlige tekst.