Obligatoriska fält

Introduktion:

Det finns flera olika metoder för att indikera obligatoriska fält i formulär. Det finns varianter där man kan lägga till symboler eller bilder för att indikera att ett fält är obligatoriskt, eller så kan man använda sig utav vanlig text. Målet är att alla användare ska förstå vilka fält som hen behöver fylla i så de inte behöver bemötas av felmeddelanden efter att ha försökt skicka in formuläret de precis fyllt i. För en del användare tar det mycket energi att gå igenom ett formulär och att sedan behöva gå igenom formuläret igen för att leta upp alla felmeddelanden kan vara riktigt jobbigt för vissa. Därför är det viktigt att ge tydliga instruktioner och skriva tydliga labels som indikerar vad som krävs av användaren. Dessa ska vara visuellt synliga men även synliga för användare som använder skärmläsare.

Sammanfattning:

Den metoden som rekommenderas är att använda sig utav är att skriva direkt i label /etiketten som tillhör fältet om den är obligatorisk eller ej. På så sätt kan användare se det visuellt men också uppfatta det med hjälp av olika skärmläsare. Om det är ont om plats i fältetiketten så kan en asterisk användas *, den ska i så fall ligga på vänster sida av etiketten. Asterisken ska döljas för hjälpmedel som skärmläsare men de ska läggas till text som är dold visuellt som kan läsas för skärmläsare. På så sätt kan seende användare se asterisken och användare med skärmläsare kan läsa “obligatoriskt” på det specifika formulärfältet. Det finns dock vissa skärmläsare som kan ha svårt att ignorera attribut med aria-hidden. Mer information kan du läsa längre ned på sidan från A11Y’s tester av skrämläsare.

Om inte fält markeras för att indikera att fältet är obligatorisk så kommer användaren att fylla i det som de tror är behövligt och skicka in formuläret. Detta kan då leda till att användaren får felmeddelanden, eftersom de som användaren upplever är obligatoriska fält kanske inte stämmer överens med vad ägaren av formuläret anser är obligatoriskt.

Riktlinjer och information

Riktlinjer från WCAG 2.1

Success Criterion 3.3.2: Labels or Instructions

I formulär som det finns både obligatoriska fält och valfria fält så ska de obligatoriska och/eller valfria fält ha tydliga instruktioner, så inte användaren behöver skriva in extra uppgifter som inte är nödvändigt men inte heller missar något som kommer ge användaren felmeddelanden och extra arbete. Detta underlättar så inte användaren behöver gå igenom samma formulär en gång till för att rätta till ”fel” som kan upplevas energikrävande.

Källa: https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions

Teknik WCAG 2.1

En symbol eller text ska indikera att det är ett obligatoriskt fält och ska associeras med field med hjälp av ett label-element, eller attributet legend för en grupp av formulär-kontroller associerade med ett fieldset.

Om en symbol används så ska innebörden av symbolen förmedlas innan användaren kommer i kontakt med den i formuläret, exempelvis sätta en text ovanför formuläret som förklarar vad den betyder: ” * betyder att det är ett obligatoriskt fällt”.

Exempel: Använda text för att indikera obligatoriska fält.

Textfältet i exemplet nedan har en label som heter ”First name (required):”.

Label elementet for attribut matchar id attributet för input elementet och label-texten indikerar att den är obligatorisk.

<label for="firstname">First name (required):</label>

Källa: https://www.w3.org/WAI/WCAG21/Techniques/html/H90

Rekommendationer från Nielsen Norman Group

Om de flesta fält i ett formulär är obligatoriska, ska vi ändå markera att de är obligatoriska?

Det är bättre att ha specificerat detta i varje fält istället för att ha exempelvis ett textstycke i början av formuläret som säger: ”Alla fält är obligatoriska”. Användare läser ofta inte den lilla texten i början på formulär och dyker direkt in i formuläret. Eller så kanske de glömmer instruktionerna under tiden dom fyller i eller liknande.

Borde man istället markera valfria fält om det finns färre av dom?

Nja, för att en användare då ska kunna se vad som är obligatoriskt så måste dom skanna hela formuläret och leta efter vad som är obligatoriska fält.

För att undvika att användaren gör fel ifrån början så kan man exempelvis använda sig utav en asterisk * för att indikera att de är ett obligatoriskt fält. Det ska då framgå högst upp i formuläret att * betyder obligatoriskt. Det är ok om man sätter * före eller efter fältetiketten, men ögonen hittar lättare * om de ligger före etiketten alltså på vänster sida.

Att sätta texten ”valfri” på fält som är valfria i formulär är inte heller någon deal-breaker om man inte gör det. Men det kan vara trevligt för användare så de kan känna sig helt säkra på att de är valfritt att fylla i.

Källa: NNgroup Marking Required Fields in Online Forms

Utvärdering och rekommendation från A11Y

A11Y gjorde ett test med olika metoder för obligatoriska fält och det som de kom fram till av alla metoder var att simpel text (obligatoriskt) var det lättaste sättet för att både seende användare ska kunna förstå att fältet är obligatoriskt, samt användare som använder sig utav hjälpmedel som skärmläsare kan läsa upp det utan problem. De använde sig av flera skärmläsare för att se skillnaden och upplevde att det var svårt att få bland annat skärmläsaren NVDA att ignorera asterisken.

<label for="input_three">First Name (required)</label>

För mer information och de olika metoderna finns via länken nedan.

Källa: Required Fields - Accessibility Introduction