Etikett i namn

Vad det kräver

Om en knapp visar “Skicka ansökan” på skärmen ska en röstkontrollanvändare kunna säga “klicka Skicka ansökan” och få klicket att landa rätt. Det fungerar bara när den synliga etiketten ingår i det tillgängliga namnet — helst som de första orden. Om det tillgängliga namnet är “Sänd formulär” medan den synliga texten säger “Skicka ansökan”, misslyckas röstkommandot utan synlig feedback.

WCAG kräver att den synliga textetiketten ingår i det tillgängliga namnet. Det tillgängliga namnet kan innehålla mer (förtydligande kontext) men den synliga texten måste finnas där, i samma ordningsföljd.

Hur du uppfyller det

• För knappar och länkar med text behöver du inte göra något särskilt — textinnehållet blir automatiskt det tillgängliga namnet.
• När du lägger till aria-label på ett kontrollelement som redan har synlig text, inkludera den synliga texten i början: <button aria-label="Skicka ansökan — öppnar bekräftelse">Skicka ansökan</button>.
• För knappar med ikon och text, låt texten styra namnet. Åsidosätt det inte med en ikon-only aria-label.
• För länkar där texten lyder “Läs mer”, utöka det tillgängliga namnet med aria-label="Läs mer om WCAG 2.2 — hela artikeln" så att det synliga “Läs mer” fortfarande är prefixet.
• När ett kontrollelements synliga etikett är en bild (ikon med textöverlager, logotyp), se till att alt-texten stämmer exakt med den synliga texten.

Vanliga fel

• En knapp med texten “Sök” och aria-label="Hitta". Röstanvändare säger “klicka Sök” — ingenting händer.
• “Lägg i kundvagn”-knappar med aria-label="Lägg blå t-shirt storlek M i din kundvagn" — utförligt namn, synliga “Lägg i kundvagn” är inte längre prefixet. Röstkommandot “klicka Lägg i kundvagn” missar.
• Ikon-och-text-knappar där designern lade till aria-label="kundvagnsikon" och överskrev den synliga “Betala”-texten.
• Lokaliserade sajter där den synliga texten översattes men aria-label fortfarande är på engelska.
• Flytande åtgärdsknappar som visar “Chat” synligt men har aria-label="Öppna supportwidget".

Varför det spelar roll

Det här är framgångskriteriet som avgör tillgängligheten för röstkontrollanvändare — personer som använder Dragon NaturallySpeaking, Röstkontroll på iOS/macOS, Röståtkomst på Android eller Windows Taligenkänning. För dessa användare är den synliga etiketten kommandot. En avvikelse är inte ett mindre besvär; det är skillnaden mellan användbart och oanvändbart. Det hjälper också skärmläsaranvändare att hänga med när en seende hjälpare säger “klicka på Spara-knappen” — meddelandet matchar orden på skärmen. Framgångskriterium 2.5.3 är enkelt att fixa och lätt att missa, eftersom automatiserade verktyg sällan flaggar det: en utvecklare som läser koden ser en aria-label och antar att det är korrekt. Kontrollera alltid det tillgängliga namnet mot den synliga texten.