Förenklad beskrivning av WCAG-kriteriet 3.3.2

Skapa tydliga och klickbara fältetiketter

För varje fält i ett formulär där användarna ska fylla i information, skapa en tydlig fältetikett (vanligtvis elementet 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 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.
  • 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 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)


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.



Kommentarer (2)


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)

Om WCAG

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

WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock 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).