Markera obligatoriska fält i formulär
Informera användaren om vilka fält i ett formulär som är obligatoriska, för att minska risken att onödig tid läggs på rättning av felaktigt eller ofullständigt ifyllda formulär.
Rekommendationer för obligatoriska fältLänk hit
- Använd en bild av en asterisk (*) för att markera ett obligatoriskt fält i ett formulär. Den ska placeras före inmatningsfältet, i
label-elementet. Låt bilden ha textekvivalentenalt=”obligatoriskt”. - Informera användarna före formuläret genom att skriva till exempel ”Fält markerade med * är obligatoriska och måste fyllas i”.
- Använd den uppmärkning av obligatoriska fält som fungerar med den html-version du valt.
Kodning av obligatoriska fältLänk hit
En bild är bättre än själva tecknet asterisk, eftersom den som använder skärmläsare får ett begripligt budskap i stället för ordet ”asterisk” uppläst. Vissa skärmläsare är också inställda på att inte läsa upp vissa tecken som historiskt har missbrukats som avgränsare, bland annat asterisker.
WAI-ARIA erbjuder attributet aria-required för att markera att ett fält är obligatoriskt i ett formulär. HTML5 innehåller ett motsvarande attribut, ”required”. Använd den uppmärkning som fungerar med den html-version du valt.
Se också R2 Ge begripliga felmeddelanden och R50 Minimera antalet fält i formulär.
Mätbarhet i formulärLänk hit
Kontrollera att det tydligt framgår vilka fält i ett formulär som är obligatoriska, även för den som använder hjälpmedel som skärmläsare.
TerminologiLänk hit
Obligatorisk heter på engelska required eller mandatory.
Kommentarer till denna riktlinje
Kommentarer (10)
I obligatoriska fält anges en *. Men hur kan man bäst ange att ett av två är obligatoriska? Dvs. man måste antingen ange e-postadress eller telefonnummer.
Jag vill hävda att hela den här rekommendationen inte längre är nödvändig, att rekommendationen rentav är direkt felaktig.
Istället för att ange att vissa fält är obligatoriska (du måste) så bör man ange att vissa fält är frivilliga (du får om du vill). Dels är det trevligare om man får välja själv istället för bli tillsagd, dels känns det bättre att man kan hoppa över vissa moment för att därmed bli klar snabbare.
Förslag på kod:
Förnamn
Favoritmat (frivilligt)
Notera att om man likväl vill följa den här rekommendationen så kan attributet required användas.
Attributet aria-required behövs inte längre.
Lösningen med en bild föreställande en asterisk samt en lämplig ALT-text behövs inte längre.
hej
Och hur tycker vi om den här? Måste man visuellt se eller räcker det med frivilligt på de fält som är frivilliga om mandatory kommer i kod?
Aria-required behövs knappast om du använder html5 med required-attribut, men däremot om du använder äldre html-version.
Intressant idé att ange frivilliga fält istället för obligatoriska! Du har absolut en poäng i att det är bra med positiva tilltal.
Spontant tänker jag att det är en bra idé om det framgår uttryckligen (ev. i kod) att övriga fält är obligatoriska. Särskilt om de flesta fälten är obligatoriska.
Vore intressant med fler kommentarer.
Bild istället känns lite förlegat, det håller jag med om. Det borde gå minst lika bra med abbr för text, som också beskrivs i relevant W3C-dokumentation: http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H90
Tar upp detta i nästa möte med referensgruppen.
Hej Ilias, kan inte du ge en länk till ett bra exempel, skulle gärna vilja se hur det används. Tycker det är ett bra förslag :)!
Tack,
Jenny
Hej,
vi använder oss av ”frivillig”-principen i Försäkringskassans tjänster sedan några år tillbaka. Vi bytte från att ha asterisker på obligatoriska fält just för att vi såg (i användningstester) problematik med att de måste tolkas och att förklaringar som ligger på annat ställe inte funkar så bra. Och dessutom är de flesta fält obligatoriska i vårt fall (så det blev förut väldigt många asterisker…). Det finns fortfarande rester med den gamla principen i en del äldre tjänster.
Av samma anledning som ovan är jag personligen lite skeptisk att införa en intro-text om att ”alla fält är obligatoriska förutom de som är markerade som frivilliga”. Den får då konkurrera i uppmärksamhet med viktig information i introduktionen (som t.ex vem tjänsten vänder sig till och vilka uppgifter man behöver för att kunna skicka in ansökan).
Tacksam för input kring detta. Måste man verkligen ha en sådan brasklapp för att möta WCAG2.1? Eller räcker det att markera frivilliga fält.
Delikat fråga Marcus!
I det relevanta WCAG-dokumentet Understanding SC 3.2.2 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html ) förekommer aningen motsägelsefulla budskap:
”The intent of this Success Criterion is not to clutter the page with unnecessary information but to provide important cues and instructions that will benefit people with disabilities. Too much information or instruction can be just as much of a hindrance as too little.”
Men också
”Clearly identifying required fields prevents a keyboard only user from submitting an incomplete form and having to navigate the redisplayed form to find the uncompleted field and provide the missing information.”
Jag skulle utifrån detta argumentera för att du bör använda semantisk uppmärkning REQUIRED och i övrigt utgå från resultatet i dina användningstester.
När det gäller att ange att (minst) ett av flera fält är obligatoriskt skulle jag snegla på fieldset och legend, ungefär som i det fjärde exemplet i W3Cs http://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H90
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.