Rekommendationer för fältetiketter/ledtexter i formulärLänk hit

• Skriv tydliga och informativa fältetiketter/ledtexter
• Koppla ihop fältetikett/ledtext och inmatningsfält så att även etiketten blir klickbar.
• Placera fältetiketterna där användarna lätt ser dem.
• Skriv utförliga instruktioner före formuläret, när sådana behövs.
• Lösningen ska inte vara beroende av title-attribut och placeholder-texter.

Skriv tydliga och informativa fältetiketterLänk hit

Målet är att det ska vara enkelt för användarna att förstå vilken information de ska fylla formulärets fält med, och hur de ska göra det. Se R61. Skriv beskrivande rubriker och etiketter.

Särskilt viktigt är att tydligt ange vilka fält som är obligatoriska. Se R101. Markera obligatoriska fält i formulär.

Skriv fältetiketter till kryssrutor så att det 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”.

Koppla ihop fältetikett och inmatningsfältLänk hit

För de flesta webbläsare kan ni koppla ihop fältetiketten och inmatningsfältet så att etiketten blir klickbar. Då räcker det att användaren klickar på etiketten för att fokus ska hamna på inmatningsfäletet (för textfält innebär det att markören hamnar i skrivfältet). Därmed blir den klickbara ytan för fältet större, vilket underlättar för användarna. Dessutom blir det möjligt för hjälpmedel, till exempel skärmläsare, att koppla rätt etikett till respektive fält. Det vanligaste är att använda label-element för att skriva fältetiketter. Koppla etiketten till rätt inmatningsfält genom att i for-attributet för label-elementet ange id för fältet den ska kopplas till.

Ibland kan det istället vara bättre att ange en gemensam etikett (legend) för en grupp av inmatningsfält (fieldset). Då kan det vara nödvändigt att komplettera denna med individuella (eventuellt visuellt osynliga) etiketter för varje enskilt fält. Det kan göras till exempel med aria-labelledby eller title-attribut. (Se även R121. Ange i kod vad sidans olika delar har för roll.)

Placera fältetiketterna där användarna lätt ser demLänk hit

• Textfält och rullgardinsmenyer: sätt etiketten ovanför eller till vänster om fältet.
• Radioknappar och kryssrutor: sätt etiketten till höger om knappen eller rutan.
• Personer som använder förstoringshjälpmedel har lättare att se etiketter som placeras nära fältet.
• Vänsterjustera fältetiketterna.

Skriv utförliga instruktioner före formuläret, när det behövsLänk hit

Undvik att skriva instruktioner mellan fältetiketten och fältet, eller efter fältet.

Längre textbeskrivningar kan kopplas till rätt inmatningsfält med hjälp av ARIA-attributet aria-describedby. Då kan exempelvis en skärmläsare berätta mer detaljer om ett inmatningsfält när användaren så önskar.

Undvik att göra lösningen beroende av title-attribut och placeholder-texterLänk hit

Title-texter visas sällan för användare med exempelvis pekskärm.

Placeholder-texter har fördelen att de är sparsamma med utrymme, men även den stora nackdelen att texten inte längre syns när användaren börjat fylla i någon information i fältet. Använd gärna dessa attribut, men gör inte lösningen beroende av informationen.

Utdrag från WCAG-standardenLänk hit

Riktlinje 3.3 Inmatningsstöd: Hjälp användare att undvika misstag och rätta till misstag.

3.3.2 Ledtexter/etiketter eller instruktioner: Det finns Ledtexter/etiketter eller instruktioner när innehåll kräver inmatning från användaren. (Nivå A)

Relaterade riktlinjerLänk hit

• R50. Minimera antalet fält i formulär
• R52. Fyll formulär med kända uppgifter
• R101. Markera obligatoriska fält i formulär
• R61. Skriv beskrivande rubriker och etiketter

MätbarhetLänk hit

Gör användningstester på pappersprototyper för att enkelt och billigt undersöka om fältetiketterna är tydliga.

TerminologiLänk hit

I html kallas formulär för form. Inmatningsfält heter oftast input. Etiketter / ledtexter kallar vi för fältetiketter när de beskriver inmatningsfält.