Tilgængelige formularer: etiketter, tip og fejl

Seks succeskriterier for formularer

WCAG 2.2 er W3C's gældende anbefaling for tilgængeligt webindhold. For teksterne i en formular betyder seks af succeskriterierne mest:

• 1.3.1 Info and Relationships (niveau A): det, layoutet viser, for eksempel hvilken etiket der hører til hvilket felt, findes også i koden eller i tekst.
• 1.3.5 Identify Input Purpose (niveau AA): felter, der beder om oplysninger om brugeren, for eksempel navn eller e-mail, angiver deres formål i koden.
• 3.3.1 Error Identification (niveau A): hvis en indtastningsfejl opdages automatisk, nævnes feltet, og fejlen beskrives i tekst.
• 3.3.2 Labels or Instructions (niveau A): der er etiketter eller instruktioner, når indholdet kræver input fra brugeren.
• 3.3.3 Error Suggestion (niveau AA): hvis en fejl opdages, og en rettelse er kendt, foreslås den, medmindre det bringer sikkerheden eller formålet med indholdet i fare.
• 4.1.2 Name, Role, Value (niveau A): hvert kontrolelement har et navn og en rolle, som software kan læse.

Hvert felt skal have en synlig etiket

En etiket siger, hvad der hører hjemme i feltet, og den forbliver synlig, mens brugeren skriver. I HTML forbinder du label-elementet med feltet: etikettens for-attribut har nøjagtig samme værdi som feltets id. Skærmlæsere læser så etiketten op sammen med feltet, og et klik på etiketten sætter markøren i feltet. En knap får sin etiket fra sin tekst, og 'Send besked' siger mere end 'Indsend'. Etiketter står som regel til højre for radioknapper og afkrydsningsfelter og til venstre for eller over andre felter; etiketter over felterne fylder mindre i bredden.

En pladsholder er ikke en etiket

Den grå tekst i et tomt felt ligner en etiket, men er det ikke. W3C nævner problemerne:

• Den forsvinder, så snart nogen skriver, så det er sværere at tjekke indtastningerne, før de sendes.
• Browsere viser den ofte i en lys farve med for lidt kontrast.
• Skærmlæsere behandler den ikke som en etiket, og understøttelsen varierer.

Brug højst en pladsholder til et eksempel, og læg alt vigtigt i etiketten eller et tip.

Tip og obligatoriske felter

• Læg regler i et tip: datoformatet, længden på et kundenummer, hvad en adgangskode skal indeholde. I HTML kan du forbinde tippet med aria-describedby, så skærmlæsere læser det op efter etiketten.
• Sig, hvilke felter der er obligatoriske, og hvilke der er valgfrie. Hvis du bruger en stjerne, så forklar den én gang i starten af formularen.
• Sæt instruktioner til hele formularen før formularen, for eksempel om en tidsgrænse.
• Hold tippene korte. For mange instruktioner gør en formular sværere, ikke lettere.

Gruppér felter, der hører sammen

Radioknapper og afkrydsningsfelter, der hører sammen, grupperes med fieldset-elementet, og legend-elementet navngiver gruppen, for eksempel 'Hvordan skal vi kontakte dig?'. W3C siger, at grupper af radioknapper altid bør grupperes på denne måde. Hold legend kort, fordi nogle skærmlæsere læser den op ved hvert felt. Grupper hjælper også ved felter med samme etiket, for eksempel vejnavnet i en leverings- og en faktureringsadresse.

autocomplete: lad browseren hjælpe

For felter, der beder om oplysninger om brugeren, kræver 1.3.5, at deres formål kan bestemmes i koden. WCAG 2.2 har en liste over disse formål, baseret på autofill-afsnittet i HTML-specifikationen, for eksempel name, given-name, family-name, email, tel, street-address og postal-code. I HTML angiver du dem med autocomplete-attributten, for eksempel autocomplete="email". Browsere kan så udfylde gemte værdier, hvilket sparer tastearbejde. Felter, der ikke handler om brugeren, behøver intet formål.

Fejlmeddelelser, der hjælper

En fejlmeddelelse har tre opgaver: nævne feltet, sige, hvad der er galt, og sige, hvordan det rettes. 3.3.1 kræver de to første, i tekst, så en rød kant eller et ikon alene er ikke nok. 3.3.3 kræver rettelsen, hvor den er kendt.

• Vis meddelelsen ved siden af feltet, og forbind den med aria-describedby, så skærmlæsere læser den op sammen med feltet.
• Vis efter afsendelse en liste over alle fejl øverst, før formularen, under en tydelig overskrift. Hver post nævner feltet, problemet og rettelsen og linker til feltet.
• Opdatér også sidens titel, for eksempel '2 fejl – Kontaktformular', og flyt fokus til det første felt med en fejl.
• Behold det, brugeren allerede har indtastet. Det er vores råd, ikke en WCAG-regel: at skulle skrive alt igen efter én fejl får folk til at give op.

Tjek din formular med Do4U

Værktøjet Formulartekster tjekker teksterne i en webformular. Du indsætter formularens HTML eller angiver sidens adresse, og du kan tilføje de fejlmeddelelser, din formular viser. Koden læser hvert felt: dets etiket og hvor etiketten kommer fra, tip, pladsholdere, obligatoriske felter, autocomplete-værdier og grupper af radioknapper eller afkrydsningsfelter. Den finder problemer som et felt uden etiket, en pladsholder som eneste etiket, obligatoriske felter, som teksten ikke nævner, manglende autocomplete-værdier og vage fejlmeddelelser, hver med sit succeskriterium. AI'en foreslår en klar etiket, et kort tip og en fejlmeddelelse, der nævner feltet og siger, hvordan indtastningen rettes. Koden tjekker hvert forslag og bygger et forbedret HTML-udkast ud fra din formular.

Do4U finder tip og bygger et udkast, du tjekker og beslutter. Værktøjet tjekker opmærkningen, ikke dine styles, scripts eller brugen med tastatur, og det fortæller dig ikke, om din formular er tilgængelig. Test den forbedrede formular med tastatur og skærmlæser.