4.1.2 Namn, roll och värde A
En person som använder hjälpmedel behöver få veta vad olika komponenter är och vad de gör. Exempelvis att en knapp är en knapp. Användare behöver även få reda på mer information, såsom status. Exempelvis kan inte en person som inte ser skärmen och använder skärmläsare se om en kryssruta är ikryssad eller inte.
Namn
Alla element ska ha ett namn. Namnet behöver inte alltid synas, exempelvis kan en knapp bara ha en symbol. Den måste då ha ett namn i koden så att personer som inte ser symbolen fortfarande förstår vad den gör.
Det är väldigt vanligt att använda knappar som inte har text, utan enbart en symbol, såsom en papperskorg, ett plustecken eller en penna. Det är bra att ha synlig text som namn på knapparna, men ibland kanske det inte får plats.
Om knapparna inte har namn läser skärmläsaren upp dessa knappar som “knapp”, “knapp” och “knapp”, vilket gör det svårt att förstå vad knapparna gör. Vi behöver därför ge dem namn i koden. Med namn läses de upp som “lägg i papperskorg, knapp”, “lägg till, knapp” och “redigera, knapp”. Namnen syns inte, men de hjälper skärmläsare att förmedla syftet med knappen.
Roll
Alla komponenter ska ha en roll. Rollen talar om för användare vad komponenten är, till exempel om det är en knapp, en länk eller formulärfält. Om korrekta HTML-element används för komponenterna finns detta redan inbyggt, men ibland kanske man vill använda en egen kodlösning, och då är det viktigt att även specificera rollen för komponenten i koden.
Denna knapp använder inte HTML-elementet button, utan en egen kodlösning har använts istället. För en seende användare syns det att det är en knapp, men för en skärmläsare kan det vara svårt att veta. Skärmläsaren läser upp knappen som ”redigera”, och det framgår inte om det är en knapp, en länk eller bara en bit text.
Det är därför viktigt att ge den en roll, som berättar för skärmläsaren och andra hjälpmedel att knappen faktiskt är en knapp. Då läser skärmläsaren upp den som ”redigera, knapp”.
Värde
Värdet eller statusen för ett element kan vara att en knapp har fokus eller inte, om den är öppen eller stängd, eller att en kryssruta är ikryssad eller inte.
Det är viktigt att ange värde eller status för en komponent i koden så att alla användare kan använda komponenten korrekt.
En skärmläsare läser upp knappen som ”värde, knapp”. Seende användare kan tydligt se att när vi klickar på knappen, då dyker nytt innehåll upp och visar om knappen är öppen eller stängd. Hjälpmedel kan inte veta detta om vi inte talar om det i koden. Då läser skärmläsaren istället upp knappen som ”värde, knapp, expanderad” eller ”värde, knapp, stängd”.
Läs mer om riktlinje 4.1.2 på W3Cs webbplats.