Riktlinje nr 101 Prio 3

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.

Om denna riktlinje Länk hit


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.

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.



Kommetarer (7)

  • Sebastian 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.

    • Ilias Bennani 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.

      • Brita 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.

    • 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