3.5.3 Gruppera formulärets fält

Prioritet: 2

WCAG 1: 12.3

På samma sätt som texter blir lättare att läsa om man delar upp dem i stycken, blir omfattande formulär tydligare och enklare att förstå om man delar upp dem i flera delar. De olika delarna kan antingen presenteras i olika sektioner på en och samma sida eller vara uppdelade på flera skilda sidor. Ett exempel på en sådan gruppering är ”Postadress” med fält för Adress/Box, Postnummer och Ort.

Det som framför allt styr om ett omfattande formulär ska delas upp i flera sidor är vilka beroenden som finns mellan uppgifterna som fylls i. Om formuläret frågar efter uppgifter som användaren har nytta av när han eller hon fyller i andra uppgifter, bör sådana uppgifter lämnas på samma sida. Information som krävs för att kunna fatta ett beslut ska finnas på en och samma sida.

Det är också viktigt att ordna delarna av ett formulär så att de presenteras i en logisk ordning för den som navigerar med hjälp av tangentbordet. Ett formulärs tabbordning ska vara från vänster till höger, uppifrån och ner. Se 3.3.18 om tabbordning.

Några tips

  • Lista all data som ska samlas in med formuläret och försök dela upp listan i grupper.
  • Om listan är lång, försök att slå ihop alternativ eller skapa mellanrubriker som delar upp listan i logiska grupper.
  • När formuläret sträcker sig över flera sidor, visa vilket steg användaren befinner sig på samt hur många steg som återstår. Till exempel ”Steg 1 av 3: Dina kontaktuppgifter”.
  • Om vissa uppgifter styr vilken övrig information som behöver fyllas i, ska dessa finnas på en egen sida. När denna information har fyllts i ska endast relevanta formulärfält presenteras i nästa steg.
  • För att tydligare signalera att formuläret är en del av sidan där användaren ska göra något, kan du ge formuläret en färgad bakgrundsyta som särskiljer formuläret från resten av sidan.

Teknisk lösning

Använd elementet fieldset för att gruppera inmatningsfält på en sida. Ge gruppen en tydlig rubrik med legend-elementet. Grupper av radioknappar och kryssrutor är lämpliga att gruppera med fieldset.

Exempel

Kodexempel med fieldset.

Exemplet nedan visar hur det ser ut när fieldset har använts för att gruppera fält.

Exemplet visar hur fieldset har använts för att gruppera fält.

Mätbarhet

Kontrollera formuläret genom granskning eller utvärdering med användare.

Senast uppdaterad 2008-12-21