Användbarhetsboken berättar hur man gör webbplatser tillgängliga och användbara. Läs den här, eller beställ från Bokus eller Adlibris.

Koppla samman etikett och kontroll

De flesta kontroller har en etikett. Det är texten som anger vilken information som skall ges eller vad kontrollen gör.

Hur etiketten placeras varierar med olika kontroller.

• För boxar och fält (valboxar, vallistor, textfält och lösenordsfält ) placeras etiketten som ledtext ovanför eller till vänster om kontrollen.

• För kryssrutor och radioknappar är det informationen som är etiketten. Detta sätts till höger om rutan/knappen.

• Många rutor/knappar behöver ingen etikett utan vad som frågas efter framgår av svaret.

När en etikett behövs sätts den som ledtext ovanför eller till vänster om antingen en enskild kryssruta eller en grupp rutor/knappar. Det är då en god idé att sätta ett <fieldset> runt kryssrutan/rutorna respektive radioknapparna, och att ha ledtexten som <legend>, så det blir tydligt vilken grupp den hör till. Se Gruppera och namnge formulärets delar, sid 273 .

• Knappar har etiketten som text ovanpå sig.

Placeringen av etiketten är viktig för både seende och blinda. För seende är sammankopplingen automatisk om texten är placerad på ett vettigt sätt i förhållande till kontrollen. För synskadade gäller faktiskt samma sak – skärmläsare är duktiga på att gissa vilken text som hör till vilken kontroll så länge layouten inte är alltför rörig.

Det är naturligtvis ändå inte tillfredsställande att skärmläsarna tvingas gissa, så för att öka tillförlitligheten finns två saker man kan göra:

• Använd en tabell för formuläret. Genom att placera etikett och kontroll i samma tabellcell, eller i cellerna omedelbart efter varandra ges skärmläsaren en tydlig signal om att de hör samman.

• Använd HTML-elementet <label>. Detta är den lösning som rekommenderas av WCAG och krävs av 24-timmarswebben. Man måste dock vara medveten om att det i dagsläget inte kan användas som ensam lösning eftersom alla skärmläsare ännu inte stöder <label>, så att placera etiketten rätt är också nödvändigt.

Se även WCAG 10.2 (prioritet 2), sid 364 , och 12.4 (prioritet 2), sid 367 .