Formularer, etiketter og fejl

Etiketter, adgang til tastaturet, klare instruktioner og effektiv fejlhåndtering er vigtige for tilgængeligheden af formularer.

Formularfelter og andre formularkontroller har normalt synlige etiketter, såsom "E-mail-adresse:" som etiketten for et tekstfelt.

 ""

Når disse etiketter er opmærket korrekt, kan man interagere med dem ved kun at bruge tastaturet, ved hjælp af stemmeinput og ved hjælp af skærmlæsere. Selve etiketten bliver også klikbar, hvilket øger målområdet og gør det lettere at vælge små radioknapper eller afkrydsningsfelter.

Hvad skal man gøre?

Find eventuelle formularer på siden. En formular kan være et enkelt tekstfelt, såsom Søg, eller det kan være en kompleks formular med tekstfelter, radioknapper, afkrydsningsfelter, rullelister og knapper.

Hvad skal man tjekke?

Tjek, at alle formularens input-/kontrol-elementer er tilgængelige med tastaturet

Læs mere om tjek af tastaturadgang her

Derudover skal du tjekke, at du kan komme til alle emner i alle rullelister.

  • Tjek, at hver formular har en etiket tilknyttet ved hjælp af 'label', 'for' og 'id', som vist i nedenstående tjek af etiketter. Dette er bedste praksis i de fleste tilfælde, men ikke et krav, fordi en etiket til formularens input-/kontrol-element i formularen også kan tilknyttes på andre måder.
  • Tjek, at etiketterne er placeret korrekt. For sprog fra venstre mod højre skal etiketter normalt være:
    • Til venstre for tekstfelter og rullelister.
      Eksempel på placering af etiket til venstre for tekstfelter og rullelister
    • Til højre for radioknapper og afkrydsningsfelter.
      Eksempel på etiket til højre for radioknapper og afkrydsningsfelter

  • Tjek, at eventuelle påkrævede/obligatoriske felter er tydeligt angivet.
    • Tjek, at indikatoren ikke er afhængig af farve alene. Hvis de påkrævede felter fx kun var angivet med røde etiketter, ville de ikke være tilgængelige for mennesker, der ikke ser de forskellige farver.
    • Tjek, at indikatoren, fx stjerner (*), er inkluderet i den markerede feltetiket for tekstfelter og rullelister eller forklaring for radioknapper og afkrydsningsfelter, som vist i tjek af etiketter nedenfor.
  • Tjek, at eventuelle instruktioner til udfyldelse af formularen optræder, før de er nødvendige, fx:
    • Generelle instruktioner skal normalt være øverst i formularen eller i det afsnit, de vedrører.
    • Tjek, at de krævede formater, fx datoer (dato-måned-år i formatet xx-xx-xxxx), er inkluderet i den markerede etiket ved hjælp af nedenstående tjek af etiketter.

Nogle enkle formularer, såsom et enkelt søgefelt, har muligvis ikke nogen fejl. Hvis du tror, at en formular på den side du tjekker, kan have fejlmeddelelser, kan du prøve at lade de krævede felter være tomme eller indtaste forkert formaterede oplysninger, såsom telefonnummer eller e-mailadresse, og derefter indsende formularen.

Hvis du får fejl:

  • Tjek, at der gives en klar og specifik vejledning, der hjælper folk med at forstå og rette fejlen. Hvis fejlen vedrører et format som dato, klokkeslæt eller adresse, skal du tjekke, at det korrekte format er tydeligt forklaret.
  • Tjek, at fejlene let kan findes. Generelt er det bedst, hvis fejlmeddelelserne placeres før formularen, snarere end efter formularen.
  • Tjek, at felterne uden fejl stadig er udfyldt med de data, du har indtastet. Dette er bedste praksis, selvom det ikke er et krav. I så fald, skal brugeren ikke genindtaste alle oplysningerne i formularen, undtagen for følsomme data, såsom kreditkortnumre.

Tjek af etiketter

Disse instruktioner hjælper dig med at tjekke, om etiketter er opmærket med 'label', 'for' og 'id'. De tjekker ikke, om formularens input-/kontrol-elementer er identificeret på andre måder. Derfor kan en formular muligvis opfylde WCAG, selvom den ikke består disse tjek.

Der er ikke en nem måde at tjekke etiketter på formularens input-/kontrol-elementer med WebDev-værktøjslinjen. Der findes dog en ”Form labels favelet [engelsk]”, der kræver installation.

  1. Åbn sidens kildekode, og find formularmarkeringen.
  2. Tjek, at:
    • Hver af formularens input-/kontrol-elementer har et etiketelement med en for-attribut, der matcher værdien af id-attributten i det relaterede input-/kontrol-element. Eksempelvis:
      <label for = "firstname"> Fornavn: </label>
      <input type = "text" name = "firstname" id = "firstname" />
    • Hvert id er unikt på websiden.

Etiketter:

Fejl:

  • Åbn den tilgængelige testside om en undersøgelse. Lad felterne være tomme og send formularen.
    Bemærk fejlmeddelelserne øverst og stjernerne for at angive påkrævede felter. Sidetitlen inkluderer også "Afsendelse mislykkedes".
    Find den tilgængelige side om en undersøgelse her