WCAG 2.5.3: Etikett i namn

Vad den här regeln innebär

\n

WCAG 2.5.3 — Label in Name — gäller för alla användargränssnittskomponenter som har en synlig textetikett. Kriteriet kräver att komponentens tillgängliga namn antingen exakt matchar den synliga etikettens text eller åtminstone innehåller den synliga etikettens text som en delsträng. Detta förhindrar en situation där en användare ser en etikett på skärmen men där deras hjälpmedelsteknik eller röststyrningsprogramvara känner igen ett helt annat namn i bakgrunden.

\n

Det tillgängliga namnet är det namn som exponeras i tillgänglighetsträdet och används av skärmläsare, röststyrningsprogram och andra hjälpmedel. Det kan komma från en mängd olika källor, inklusive elementets synliga textinnehåll, ett aria-label-attribut, en aria-labelledby-referens, ett title-attribut eller ett associerat <label>-element. När en utvecklare åsidosätter det tillgängliga namnet med något som inte inkluderar den synliga etikettens text uppstår en mismatch och kriteriet underkänns.

\n

Berörda element inkluderar alla interaktiva komponenter som visar text och också har ett tillgängligt namn: knappar, länkar, formulärfält med synliga etiketter, menyalternativ, flikar, kryssrutor, alternativknappar och anpassade ARIA-widgets. Icke-interaktiva element som stycken eller rubriker omfattas inte av detta kriterium.

\n

Vad som räknas som godkänt: Det tillgängliga namnet innehåller den synliga etikettens text som en sammanhängande delsträng, med bortseende från inledande och avslutande blanksteg. Matchningen är inte skiftlägeskänslig. Om en knapp till exempel har texten ”Search Products” är ett tillgängligt namn ”Search Products Now” godkänt eftersom det innehåller ”Search Products”. Ett tillgängligt namn ”Find Products” underkänns eftersom det inte innehåller den synliga texten.

\n

Vad som räknas som underkänt: Det tillgängliga namnet är helt annorlunda än den synliga etiketten, eller så utelämnar det tillgängliga namnet en meningsfull del av den synliga etiketten. En knapp som visuellt visar ”Buy Now” men har aria-label='Purchase item' underkänns enligt detta kriterium. På samma sätt underkänns en länk som visar ”Contact Us” men är innesluten i ett element med aria-label='Reach our team'.

\n

Officiella undantag definierade i WCAG: Kriteriet gäller inte komponenter där etiketten är rent symbolisk eller piktografisk utan textmotsvarighet (till exempel en ikonknapp utan synlig text). Det gäller inte heller när texten är en del av ett rent dekorativt element som inte bär någon semantisk betydelse. Matematisk notation och språkspecifika scenarier där textrepresentationen inte kan kopplas till ett talat ord är också undantagna. Dessutom är komponenter där det tillgängliga namnet avsiktligt utökas med ytterligare kontext — förutsatt att den synliga texten fortfarande finns med i det tillgängliga namnet — förenliga.

\n\n

Varför det är viktigt

\n

Detta kriterium skyddar i första hand användare som är beroende av röststyrningsprogram som Dragon NaturallySpeaking (numera Dragon Professional), Windows Speech Recognition eller Apples Voice Control. Dessa användare navigerar och aktiverar gränssnittselement genom att uttala etiketten de ser på skärmen. När det tillgängliga namnet inte matchar den synliga etiketten kan programvaran inte hitta målelementet när användaren säger dess namn, vilket i praktiken gör kontrollen oåtkomlig utan mus eller tangentbord. För användare med motoriska funktionsnedsättningar — inklusive personer med belastningsskador, muskeldystrofi, cerebral pares eller ryggmärgsskador — är röstinmatning ofta deras primära eller enda sätt att använda en dator. En mismatch på en enda knapp kan blockera åtkomst till ett helt arbetsflöde.

\n

Skärmläsaranvändare påverkas också. När en skärmläsare annonserar ett tillgängligt namn som skiljer sig från det som är synligt på skärmen skapar det kognitiv desorientering. En seende användare som också använder en skärmläsare — till exempel någon med nedsatt syn som använder både visuella och auditiva återkopplingar samtidigt — kan höra en sak annonseras medan de läser något annat på skärmen, vilket bryter deras mentala modell av gränssnittet.

\n

Användare med kognitiva funktionsnedsättningar gynnas av konsekvens mellan det de läser och det som talas eller annonseras. Oväntade namnändringar ökar den kognitiva belastningen och kan orsaka förvirring eller fel, särskilt för användare med minnesnedsättningar eller de som lär sig använda ett system för första gången.

\n

Ett konkret scenario från verkligheten: Tänk dig en e-handelssida för kassan med en knapp som visuellt visar texten ”Place Order”. En utvecklare lägger till aria-label='Submit purchase form' för att ge vad hen anser är ett mer beskrivande namn. En kund som använder Dragon NaturallySpeaking säger ”Click Place Order” — Dragon skannar tillgänglighetsträdet, hittar inget element med namnet ”Place Order” och kan inte aktivera knappen. Kunden kan inte slutföra sitt köp utan att byta till muskontroll, vilket hen kanske inte kan göra. Kunden avbryter transaktionen. Detta är inte ett hypotetiskt extremfall; det är ett vanligt felmönster som hittas i automatiserade granskningar av detaljhandels- och banksajter.

\n

Enligt Världshälsoorganisationen lever över en miljard människor världen över med någon form av funktionsnedsättning. WebAIM Million-rapporten 2023 visade att WCAG 2.5.3-etikettmismatchar förekom i en betydande andel av de granskade sidorna, ofta introducerade av välmenande men felaktigt använd ARIA. Utöver tillgänglighet förbättrar konsekvent etikettering SEO eftersom sökmotorers crawlers som indexerar länk- och knapptext för relevansrankning får mer meningsfulla signaler när tillgängliga namn stämmer överens med synlig text.

\n\n

Relaterade Axe-core-regler

\n

\n
• label-content-name-mismatch: Detta är den primära automatiserade regeln kopplad till WCAG 2.5.3. Regeln kontrollerar interaktiva element — såsom knappar, länkar och ARIA-roller som role='button', role='link', role='menuitem' och role='tab' — som har både en synlig textetikett och ett tillgängligt namn. Den flaggar alla element där det tillgängliga namnet inte innehåller den synliga texten som en delsträng (skiftlägesokänsligt). Regeln riktar sig specifikt mot element där det tillgängliga namnet åsidosätts av aria-label eller aria-labelledby på ett sätt som avviker från texten på skärmen. Axe rapporterar dessa som överträdelser med påverkan ”serious” eftersom de direkt hindrar användare av röstinmatning från att aktivera kontroller.
\n
• Begränsningar i automatiserad detektion: Automatiserade verktyg som axe-core kan pålitligt upptäcka mismatchar när den synliga texten renderas som vanliga textnoder i elementet och det tillgängliga namnet kommer från ett statiskt aria-label- eller aria-labelledby-attribut. Manuell testning krävs dock när: (1) den synliga texten renderas via CSS-psuedo-elementen ::before eller ::after, eftersom dessa kan eller inte kan inkluderas i tillgänglighetsträdet beroende på webbläsare och version av hjälpmedel; (2) etiketten dynamiskt infogas via JavaScript efter sidladdning; (3) den synliga texten inkluderar ikoner eller bildbaserad text där den textuella komponenten måste tolkas; (4) elementets beräknade tillgängliga namn involverar komplexa aria-labelledby-kedjor som konkatenerar flera element. I dessa fall måste en mänsklig testare med en skärmläsare verifiera vad som faktiskt annonseras jämfört med vad som är synligt.
\n

\n\n

Hur man testar

\n

\n
1. Automatisk skanning med axe DevTools eller Lighthouse: Installera webbläsartillägget axe DevTools (Chrome eller Firefox) eller kör en Lighthouse-tillgänglighetsgranskning i Chrome DevTools. Kör skanningen på den fullt renderade sidan — se till att dynamiskt innehåll, modaler och expanderade menyer är öppna om de innehåller interaktiva element. I axe-resultatpanelen, filtrera på regel-ID label-content-name-mismatch. Varje flaggat element visar sitt beräknade tillgängliga namn tillsammans med den synliga texten, vilket gör mismatchen omedelbart tydlig. Notera elementets selektor och inspektera DOM:en för att identifiera källan till åsidosättandet av det tillgängliga namnet. Lighthouse visar samma fel under kategorin ”Accessibility” med en referens till WCAG 2.5.3.
\n
2. Manuell inspektion med webbläsarens DevTools: Öppna webbläsarens Accessibility-panel (Chrome DevTools → Elements → fliken Accessibility, eller Firefox DevTools → fliken Accessibility). Markera varje interaktivt element som har synlig text. Kontrollera avsnittet ”Computed Properties” för fältet Name för elementet. Jämför detta värde med den synliga etiketten. Om det beräknade namnet inte innehåller den synliga etikettens text som en delsträng underkänns elementet enligt 2.5.3.
\n
3. Skärmläsartestning med NVDA + Firefox: Öppna Firefox med NVDA igång. Navigera till varje interaktivt element med Tab-tangenten. Lyssna på vad NVDA annonserar som elementets namn. Notera alla avvikelser mellan det annonserade namnet och texten som visas på skärmen. Använd NVDAs Element List (Insert+F7) för att bläddra bland alla länkar och knappar och jämför de annonserade namnen med visuella etiketter i bulk.
\n
4. Skärmläsartestning med JAWS + Chrome: Öppna Chrome med JAWS igång. Tabba igenom alla interaktiva kontroller. JAWS annonserar det tillgängliga namnet följt av rollen. När det annonserade namnet inte inkluderar synlig text, notera elementet. Använd dessutom JAWS ”Browse Mode” och den virtuella vyn för att se det beräknade tillgängliga namnet för varje kontroll.
\n
5. Skärmläsartestning med VoiceOver + Safari (macOS/iOS): Aktivera VoiceOver (Command+F5 på macOS). Använd Tab eller VO+Högerpil för att navigera mellan interaktiva element. VoiceOver annonserar det tillgängliga namnet för varje kontroll. På iOS, svep åt höger med ett finger för att gå igenom elementen och lyssna efter skillnader mellan namn och etikett.
\n
6. Röststyrningstest med Voice Control (macOS/iOS) eller Dragon: Aktivera macOS Voice Control (System Settings → Accessibility → Voice Control). Säg ”Show names” för att visa etiketter för alla interaktiva element. Kontrollera att etiketterna som visas av Voice Control matchar den synliga texten på skärmen. Försök att aktivera kontroller genom att uttala den synliga etikettens text — alla kontroller som inte svarar på sitt synliga namn är ett 2.5.3-fel. Upprepa med Dragon NaturallySpeaking på Windows om tillgängligt, med kommandot ”Click [label]”.
\n

\n\n

Hur man åtgärdar

\n\n

Knapp med åsidosättande aria-label — Felaktig

\n

<!-- FAIL: aria-label ersätter helt den synliga texten \"Search\"\n     med \"Execute query\", vilket bryter röstinmatning -->\n<button aria-label='Execute query'>\n  Search\n</button>

\n\n

Knapp med åsidosättande aria-label — Korrekt

\n

<!-- PASS: Ta helt bort den mismatchade aria-label.\n     Knappens synliga text \"Search\" blir automatiskt dess tillgängliga namn.\n     Användare av röststyrning kan säga \"Click Search\" för att aktivera den. -->\n<button>\n  Search\n</button>\n\n<!-- PASS (alternativ): Om ytterligare kontext behövs,\n     se till att det tillgängliga namnet INNEHÅLLER den synliga texten. -->\n<button aria-label='Search products'>\n  Search\n</button>

\n\n

Länk med aria-labelledby som pekar på orelaterad text — Felaktig

\n

<!-- FAIL: aria-labelledby refererar till en rubrik \"Our Services\"\n     men länken visar visuellt \"Learn more\",\n     så det tillgängliga namnet är \"Our Services\" i stället för \"Learn more\" -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' aria-labelledby='services-heading'>Learn more</a>\n</p>

\n\n

Länk med aria-labelledby som pekar på orelaterad text — Korrekt

\n

<!-- PASS: Använd aria-labelledby för att konkatenera länkens egen text med rubriken.\n     Det tillgängliga namnet blir \"Learn more Our Services\",\n     vilket innehåller den synliga etiketten \"Learn more\". -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' id='learn-link' aria-labelledby='learn-link services-heading'>\n    Learn more\n  </a>\n</p>\n\n<!-- PASS (alternativ): Gör den synliga länktexten självbeskrivande\n     så att inget åsidosättande behövs. -->\n<a href='/services'>Learn more about our services</a>

\n\n

Ikonknapp där aria-label står i konflikt med synlig text — Felaktig

\n

<!-- FAIL: Knappen visar en kundvagnsikon OCH texten \"Cart\".\n     aria-label 'View shopping basket' innehåller inte \"Cart\",\n     så användare som säger \"Click Cart\" får ingen respons. -->\n<button aria-label='View shopping basket'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

Ikonknapp där aria-label står i konflikt med synlig text — Korrekt

\n

<!-- PASS: aria-label innehåller den synliga texten \"Cart\" som en delsträng.\n     Användare kan säga \"Click Cart\" eller \"Click View Cart\" och båda fungerar. -->\n<button aria-label='View Cart'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>\n\n<!-- PASS (föredras): Ta bort aria-label och göm ikonen från trädet.\n     Knappens textinnehåll \"Cart\" blir direkt det tillgängliga namnet. -->\n<button>\n  <svg aria-hidden='true' focusable='false'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

Formfält med en synlig etikett men mismatchad aria-label — Felaktig

\n\n

(Content truncated due to token limit — please retry this article.)