3.5.5 Skapa tydliga och klickbara fältetiketter

Prioritet: 1

WCAG 1: 10.2, 12.4

Varje inmatningsfält ska ha en fältetikett som förklarar fältets funktion. Skriv etiketten så att det enkelt går att förstå hur och vilken information som ska fyllas i. Ange till exempel hur utförlig information som efterfrågas. Vänsterjustera fältetiketten.

Genom att koppla ihop fältetikett och fält blir rubriken klickbar i de flesta webbläsare. Detta innebär att markören placeras i fältet när användaren klickar på rubriken. Därmed blir den klickbara ytan för fältet större, vilket underlättar för alla. Dessutom blir det möjligt för hjälpmedel att koppla rätt rubrik till respektive fält.

Undvik att skriva instruktioner mellan fältetikett och fält eller efter fältet. Om det finns behov av utförliga instruktioner, skriv dem före formuläret. Title-texter på inmatningsfält är svåra att upptäcka för användare som tabbar sig fram.

Placering av fältetiketter

  • Textfält: Placera fältetiketten ovanför eller till vänster om fältet.
  • Radioknappar och kryssrutor: Placera fältetiketten till höger om respektive knapp/ruta

Fältetiketter till enstaka kryssrutor

Skriv fältetiketter till enstaka kryssrutor så att det är tydligt framgår vad det innebär om kryssrutan är ifylld respektive tom. Skriv i jakande form, till exempel ”Ja, jag vill få nyhetsbrevet via e-post”. Undvik kryssrutor där användaren ska välja bort någonting, till exempel ”Nej tack, jag vill inte ha nyhetsbrevet via e-post”.

Teknisk lösning

Använd label-elementet för att koppla ihop varje rubrik med det inmatnings-fält den beskriver. Detta görs genom att du i etikettens for-attribut anger id för fältet den skall kopplas till.

Några tips

Skriv fältetiketter till enstaka kryssrutor så att det är tydligt framgår vad det innebär om kryssrutan är ifylld respektive tom. Skriv i jakande form, till exempel ”Ja, jag vill få nyhetsbrevet via e-post”. Undvik kryssrutor där användaren ska välja bort någonting, till exempel ”Nej tack, jag vill inte ha nyhetsbrevet via e-post”.

Exempel

Kodexempel på hur man kopplar ihop fältetiketter och inmatningsfält

Mätbarhet

Användningstester på pappersprototyper är ett enkelt och billigt sätt att undersöka om fältetiketterna är tydliga.

Senast uppdaterad 2009-01-30