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 textekvivalenten alt=”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 (10)

  • Besökare skriver:

    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.

    • Besökare skriver:

      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.

      • Besökare skriver:

        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?

      • Pär Lannerö skriver:

        Aria-required behövs knappast om du använder html5 med required-attribut, men däremot om du använder äldre html-version.

      • Pär Lannerö skriver:

        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.

      • Pär Lannerö skriver:

        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.

      • Besökare skriver:

        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

        • Marcus Davidsson skriver:

          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.

          • Pär Lannerö skriver:

            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.

    • Pär Lannerö skriver:

      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


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)