Riktlinje nr 55 Prio 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 (label) som förklarar fältets funktion.


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

  • Skriv fältetiketter som gör det enkelt för användarna att förstå vilken information de ska fylla formulärens fält med, och hur de ska göra det.
  • Var tydlig med vilken information användarna bekräftar när de fyller i en kryssruta.
  • Koppla ihop fältetikett och textfält så att även etiketten blir klickbar.
  • Skriv utförliga instruktioner före formuläret, när det behövs. Undvik att skriva instruktioner mellan fältetiketten och fältet, eller efter fältet.
  • Undvik att skriva title-texter till fält, eftersom de är svåra att upptäcka för användare som navigerar med tangenter.
  • Vänsterjustera fältetiketterna.

Gör det tydligt för användarna vad deras kryss betyderLänk hit

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”.


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.


Fältetiketter ökar den klickbara ytanLä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.


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 används alltså elementet label.



Kommetarer (2)