Skapa tydliga fältetiketter och ledtexter

Om riktlinjen

Innehåller lagkrav
EN 9.3.3.2
WCAG 3.3.2 (A)

Område

För att underlätta för personer som ska fylla i formulär eller liknande ska det alltid finnas tydliga instruktioner. Det ska också vara tydligt vad som måste fyllas i och inte.

Därför behöver inmatningsfält ha fältetiketter och ledtexter

För att personer ska fylla i rätt information i varje fält i ett formulär, behöver det finnas tydliga fältetiketter/ledtexter som förklarar fältets funktion.

Målet är att det ska vara enkelt för personer att förstå vilken information de ska fylla formulärets fält med, och hur de ska göra det.

Vad kräver lagen?

Varje fält eller interaktiv komponent i ett formulär ska ha en synlig etikett eller ifyllnadsanvisning.

Det ska i text tydligt framgå vilka fält som är obligatoriska. Texten kan finnas i etiketten, men om en symbol – till exempel en stjärna – används i etiketten för obligatoriska fält ska det finnas en text som förklarar symbolens betydelse.

En platshållartext i ett fält (anges vanligen med hjälp av placeholder-attribut) räknas inte som en synlig ledtext. Det behövs därför en synlig ledtext utöver eventuell platshållartext.

Även rullgardinslistor (select) behöver synliga ledtexter, det räcker inte att ett värde visas i fältet.

Undantag från lagkraven

Om syftet med fältet är uppenbart för seende krävs ingen synlig ledtext, exempelvis för ett ensamt sökfält med en intilliggande knapp med texten ”Sök”. Fältet behöver dock en dold ledtext eller ett maskinläsbart namn för att förmedla information till hjälpmedel som exempelvis skärmläsare.

Om samtliga fält är obligatoriska eller frivilliga behöver detta inte anges i ledtexter eller instruktioner.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Inte mer information än nödvändigt

Skriv inte mer information än vad som är nödvändigt i etiketten, eftersom det kan göra att formuläret upplevs som rörigt och komplicerat.

Placera fältetiketter där användarna lätt ser dem

Textfält och rullgardinslistor

Placera etiketten ovanför fältet.

Radioknappar och kryssrutor

Placera etiketten till höger om knappen eller rutan.
Vänsterjustera fältetiketterna.

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.

Aria-describedby för längre textbeskrivningar

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-texter

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

Placeholder (platshållare)

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.

Platshållare har ofta dålig kontrast som inte går att påverka på ett standardiserat sätt i alla webbläsare. Använd därför dessa attribut sparsamt, och undvik att göra lösningen beroende av informationen.

Skriv ledtexter till kryssrutor i jakande form

Skriv 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”. Då blir det tydligt vad det innebär om kryssrutan är ifylld respektive tom.