Tilgjengelige skjemaer: etiketter, tips og feilmeldinger

Seks suksesskriterier for skjemaer

WCAG 2.2 er den gjeldende W3C-anbefalingen for tilgjengelig nettinnhold. For tekstene i et skjema betyr seks av suksesskriteriene mest:

• 1.3.1 Info and Relationships (nivå A): det oppsettet viser, for eksempel hvilken etikett som hører til hvilket felt, er også tilgjengelig i koden eller i tekst.
• 1.3.5 Identify Input Purpose (nivå AA): felt som ber om opplysninger om brukeren, for eksempel navn eller e-post, oppgir formålet sitt i koden.
• 3.3.1 Error Identification (nivå A): hvis en inndatafeil oppdages automatisk, blir feltet navngitt og feilen beskrevet i tekst.
• 3.3.2 Labels or Instructions (nivå A): det finnes etiketter eller instruksjoner når innholdet krever inndata fra brukeren.
• 3.3.3 Error Suggestion (nivå AA): hvis en feil oppdages og en rettelse er kjent, blir den foreslått, med mindre dette setter sikkerheten eller formålet med innholdet i fare.
• 4.1.2 Name, Role, Value (nivå A): hvert kontrollelement har et navn og en rolle som programvare kan lese.

Hvert felt trenger en synlig etikett

En etikett sier hva som skal stå i feltet, og den er synlig mens brukeren skriver. I HTML kobler du label-elementet til feltet: for-attributtet til etiketten har nøyaktig samme verdi som id-en til feltet. Skjermlesere leser da etiketten sammen med feltet, og et klikk på etiketten setter markøren i feltet. En knapp får etiketten fra teksten sin, og «Send melding» sier mer enn «Send inn». Etiketter står vanligvis til høyre for radioknapper og avmerkingsbokser og til venstre for eller over andre felt; etiketter over feltene trenger mindre plass i bredden.

En plassholder er ikke en etikett

Den grå teksten i et tomt felt ser ut som en etikett, men er det ikke. W3C nevner problemene:

• Den forsvinner så snart noen skriver, så det blir vanskeligere å sjekke det som er fylt inn, før man sender.
• Nettlesere viser den ofte i en lys farge med for lite kontrast.
• Skjermlesere behandler den ikke som en etikett, og støtten varierer.

Bruk en plassholder høyst til et eksempel, og legg alt viktig i etiketten eller en hjelpetekst.

Hjelpetekster og obligatoriske felt

• Legg regler i en hjelpetekst: datoformatet, lengden på et kundenummer, hva et passord må inneholde. I HTML kan du koble hjelpeteksten til feltet med aria-describedby, så skjermlesere leser den etter etiketten.
• Si hvilke felt som er obligatoriske, og hvilke som er valgfrie. Hvis du bruker en stjerne, forklar den én gang i starten av skjemaet.
• Sett instruksjoner for hele skjemaet foran skjemaet, for eksempel om en tidsgrense.
• Hold hjelpetekstene korte. For mange instruksjoner gjør et skjema vanskeligere, ikke enklere.

Grupper felt som hører sammen

Radioknapper og avmerkingsbokser som hører sammen, grupperes med fieldset-elementet, og legend-elementet navngir gruppen, for eksempel «Hvordan vil du at vi skal kontakte deg?». W3C sier at grupper med radioknapper alltid bør grupperes slik. Hold legend kort, fordi noen skjermlesere leser den ved hvert felt. Grupper hjelper også ved felt med samme etikett, for eksempel gaten i en leveringsadresse og i en fakturaadresse.

autocomplete: la nettleseren hjelpe

For felt som ber om opplysninger om brukeren, krever 1.3.5 at formålet kan fastslås i koden. WCAG 2.2 har en liste over disse formålene, basert på autofyll-delen av HTML-spesifikasjonen, for eksempel name, given-name, family-name, email, tel, street-address og postal-code. I HTML setter du dem med autocomplete-attributtet, for eksempel autocomplete="email". Nettlesere kan da fylle inn lagrede verdier, noe som sparer skriving. Felt som ikke handler om brukeren, trenger ikke noe formål.

Feilmeldinger som hjelper

En feilmelding har tre oppgaver: navngi feltet, si hva som er feil, og si hvordan det rettes. 3.3.1 krever de to første, i tekst, så en rød ramme eller et ikon alene er ikke nok. 3.3.3 krever rettelsen der den er kjent.

• Vis meldingen ved siden av feltet og koble den til med aria-describedby, så skjermlesere leser den sammen med feltet.
• Etter innsending viser du en liste over alle feil øverst, foran skjemaet, under en tydelig overskrift. Hver oppføring navngir feltet, problemet og løsningen, og lenker til feltet.
• Oppdater også sidetittelen, for eksempel «2 feil – Kontaktskjema», og flytt fokus til det første feltet med feil.
• Behold det brukeren allerede har fylt inn. Dette er vårt råd, ikke en WCAG-regel: å måtte skrive alt på nytt etter én feil får folk til å gi opp.

Sjekk skjemaet ditt med Do4U

Verktøyet Skjematekster sjekker tekstene i et nettskjema. Du limer inn HTML-koden til skjemaet eller oppgir adressen til siden, og du kan legge til feilmeldingene skjemaet ditt viser. Koden leser hvert felt: etiketten og hvor etiketten kommer fra, hjelpetekster, plassholdere, obligatoriske felt, autocomplete-verdier og grupper av radioknapper eller avmerkingsbokser. Den finner problemer som et felt uten etikett, en plassholder som eneste etikett, obligatoriske felt som teksten ikke nevner, manglende autocomplete-verdier og vage feilmeldinger, hver med sitt suksesskriterium. KI-en foreslår en tydelig etikett, en kort hjelpetekst og en feilmelding som navngir feltet og sier hvordan inndataene rettes. Koden sjekker hvert forslag og lager et forbedret HTML-utkast av skjemaet ditt.

Do4U finner tips og lager et utkast, du sjekker og bestemmer. Verktøyet sjekker markeringen, ikke stilarkene, skriptene eller tastaturbruken din, og det sier ikke om skjemaet ditt er tilgjengelig. Test det forbedrede skjemaet med tastatur og skjermleser.