Riktlinje nr 55 Prio 1 WCAG nivå A

Skapa tydliga och klickbara fältetiketter

Utdrag från WCAG-standarden

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)

WCAG (Web Content Accessibility Guidelines) 2.0 är den standard som bland annat webbdirektivet bygger på. Se även webbriktlinje R1. Följ WCAG 2.0 nivå AA.

Utdraget kommer från en översättning och kan innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).


2017-07-03: Resterande del av sidan är ett utkast. Syftet är att underlätta tillämpning av WCAG. Förbättringsförslag efterlyses. Kommentera gärna med hjälp av kommentarsfunktionen sist på sidan eller i Facebookgruppen webbriktlinjer eller med epost till info@webbriktlinjer.se.

Vad betyder det här?Länk hit

För varje fält i ett formulär där användarna ska fylla i information, skapa en tydlig fältetikett (label) som förklarar fältets funktion. Men skriv inte mer information än vad som är nödvändigt, eftersom det kan göra att formuläret upplevs som rörigt och komplicerat.

Genom att i kod (med hjälp av for-attributet på label-elementet) koppla etiketten till fältet kan användare markera fältet även genom att klicka på etiketten, vilket ökar den klickbara ytan. Genom kopplingen blir det även möjligt för en person som saknar en visuell presentation att veta vilken etikett som hör till vilket fält, eftersom skärmläsare läser upp etiketten när fältet får fokus.

Om det behövs utförliga instruktioner, placera dessa i första hand i inledningen av formuläret.


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

  • Skriv tydliga och informativa fältetiketter
  • Koppla ihop fältetikett och textfä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.
  • Undvik att göra lösningen 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 textfältLänk hit

För de flesta webbläsare kan ni koppla ihop fältetiketten och textfältet så att etiketten blir klickbar. Då räcker det att användaren klickar på etiketten för att markören ska hamna 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. Använd 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. (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.


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. Fält heter oftast input, och för etiketter / ledtexter används alltså elementet label för fältetiketter.



Kommentarer (2)