Hvordan er formularelementer designet til at være tilgængelige?

Alle har på et tidspunkt måttet håndtere formularer. Tidligere mere på papir. I dag er det mere og mere digitale formularer, fordi de tjener brugerens interaktion med en hjemmeside. Uanset om det er kommunikation på internettet eller bestilling af en vare, kan du finde dem overalt. Søgning på internettet, for eksempel med Google, påvirkes også. Det er vanskeligere at udfylde disse formularer for personer med fysiske eller endda kognitive handicap, såvel som for blinde og synshandicappede. For at alle mennesker kan deltage i det offentlige liv, skal disse formularer være designet til at være barrierefri. Men: Hvordan opretter man egentlig tilgængelige formularelementer?

Der findes adskillige teknikker til dette. Men før man går i gang med teknikkerne, bør man kende formelementerne. De kan opdeles i forskellige typer. Blandt andet er der følgende typer

• enkeltlinjede inputfelter

• inputområder med flere linjer

• Udvalgslister

• Radioknapper

• Afkrydsningsfelter

• Send/Annuller-knapper

Mærkning af formularfelter

For at opnå tilgængelighed i formularer skal de forskellige kontrolelementer mærkes. Disse mærker gør det muligt for hjælpemidler at genkende kontrolelementernes funktioner og kommunikere dem til brugeren. Det er vigtigt, at mærkerne er tydeligt knyttet til kontrolelementerne, ellers vil skærmlæsere ikke kunne oprette forbindelse til elementerne. Som følge heraf har brugerne svært ved at forstå formularen. De kan ikke identificere, hvilke oplysninger der skal indtastes i hvilke felter. Som følge heraf er de ikke i stand til at udfylde formularen korrekt og laver ofte fejl. Beskrivelserne er dog ikke alle mærket ens. Den afgørende faktor er, om de skal være synlige for alle eller ej. I HTML-programmeringssproget skelnes der derfor mellem mærkeelementet og aria-attributterne. Mærkeelementet bruges til inputfelter, valglister, radioknapper og afkrydsningsfelter og skal placeres i overensstemmelse hermed. For inputfelter og valglister placeres mærket foran kontrolelementerne. For radioknapper og afkrydsningsfelter placeres de dog efter kontrolelementet. For-attributten skal tilføjes, så mærkerne også kan linkes til det tilsvarende element.

Attributten aria bruges i HTML til knapper. Knapper kan f.eks. repræsentere "send" eller "annuller" i en formular. aria-attributter gør beskrivelserne af de respektive elementer genkendelige, så de kun kan genkendes af hjælpeteknologier. Derfor kan de også bruges til inputfelter, der kun skal være synlige for skærmlæseren. Der findes mange aria-attributter, der bruges til at forbedre webtilgængeligheden. Disse adskiller sig dog i deres type og funktion. Den såkaldte aria-label bruges til at mærke et element. Det er selvfølgelig også muligt at bruge den samme etiket til flere elementer. Dette er muligt med en aria-labelledby.

Enkelt- og flerlinjers inputfelter

Inputfelter er et af de mest anvendte elementer i formularer. De kan være på én linje eller flere linjer. Felter på én linje bruges til korte forespørgsler, f.eks. en persons navn, en e-mailadresse, en gadeadresse eller en by.

De oprettes i HTML med input-Tag og type-attributten.

Derudover kan andre attributter tilføjes, der f.eks. definerer linjelængden.

Flerlinjefelter bruges normalt til større tekstområder som tekstbeskeder. Disse oprettes derefter med textarea-Tag. Igen kan udvikleren angive antallet af linjer og linjelængden. For at disse felter skal være tilgængelige, skal label-Tag dog stadig tilføjes. Det er dog ikke muligt at oprette et link mellem etiketten og elementerne, hvis de ikke er unikt tildelte. De skal derefter linkes via for-attributten og id-attributten. I det følgende HTML-eksempel er simple etiketter implementeret i sådanne inputfelter.

<label for=“vorname“>Ihr Vornavn: </label>

<input type“text“ name=“vorname“ id=“vorname“ />

<br />

<label for=“nachricht“>Ihre besked: </label>

<textarea name=“nachricht“ id=“nachricht"> </textarea>

Her oprettes først et enkeltlinjet inputfelt til fornavnet med typen "tekst". Etiketten "Dit fornavn:" gøres synlig for alle af label-elementet. Denne placeres foran input-elementet, da den udskrives før inputfeltet. Attributten for i label-Tag og attributten id i input-elementet forbinder disse områder. Det er vigtigt, at begge indhold er identiske, ellers kan de ikke forbindes. Attributten navn fungerer som et identifikationsnavn for dette felt og er påkrævet for at overføre dataene til en serverside.

Dernæst oprettes et inputområde med flere linjer med tagget "textarea". Etiketten "Din besked:" vises derefter her via label-elementet. Også her er de to områder med samme tekstindhold forbundet via attributterne for og id.

Generelle bemærkninger

Generelt bør formularer være klare og utvetydige. Forudsigelighed er også meget nyttigt. Dette giver brugerne mulighed for hurtigt at se, hvad der kræves af dem. En klar og fornuftig struktur er også meget vigtig. Relaterede indholdselementer kan grupperes sammen. Logisk adskilte enheder kan også adskilles visuelt. Dette letter orienteringen. Derudover kan de adskilles fra hinanden ved farve. Det er vigtigt, at minimumskontrasten på 4,5:1 opretholdes.

Tastaturbetjening

En af de vigtigste funktioner for tilgængeligt design af formularfelter er betjeningen via tastatur. Der er mennesker, der ikke kan bruge en mus på grund af deres handicap. Det er derfor endnu vigtigere at designe formularer på en sådan måde, at de også kan navigeres ved hjælp af tastaturet. Brugen af label-elementer og aria-attributter gør formularer lettere at forstå og betjene. En anden måde at forenkle betjeningen via tastaturet er brugen af tastaturgenveje. Her kan formularelementer gemmes med tastaturgenveje. Dette kan hjælpe med at nå bestemte områder hurtigere eller betjene funktioner hurtigere. Accesskey-attributten i HTML bruges til dette formål. Denne attribut indsættes ved det element, den skal bruges til. Der tildeles blot tasten, som derefter bruges til tastaturkommandoen. Hvis du for eksempel tildeler tasten "n" til et felt eller en knap, kan den betjenes i Windows med tastaturgenvejen (Alt + n).

Sørg dog for, at denne tastaturgenvej ikke allerede bruges til en anden kommando i browseren.

Reduktion til minimum

Ligeledes er det tilrådeligt at reducere det hele til det væsentlige for ikke at belaste personer med handicap unødvendigt. Derfor bør kun de absolut nødvendige data anmodes om. Forespørgsel på allerede eksisterende data bør udelades. Derudover kan synligheden af formularfelter tilpasses situationen. Valgfrie inputfelter eller felter, der er knyttet til betingelser, behøver ikke at være synlige. De kan vises, når der er behov for dem. For eksempel giver forespørgsel på børns alder ingen mening, hvis det tidligere er valgt, at der ikke er børn til stede.

Hjælp og fejlmeddelelser

Derudover bør der tilbydes hjælp til input. Dette kan være i form af en dialogboks eller et værktøjstip. Med deres hjælp kan inputtet forklares mere detaljeret. En anden mulighed ville være at linke til en separat hjælpeside. Dette ville øge succesraten enormt. Fejl sker stadig. Vigtige er da meningsfulde fejlmeddelelser. Hvis f.eks. adgangskoden blev indtastet forkert under login, bør meddelelsen "Brugernavn eller adgangskode er forkert" ikke vises. Det er bedre at filtrere fejlen. Korrekt her ville være: "Den indtastede adgangskode er forkert. Indtast venligst den korrekte adgangskode".

Der er flere typer fejl. For det første formatfejlen. Her indtastes adgangskoden i det forkerte format. For eksempel indtastes bogstaver i stedet for tal. Der kan også opstå værdifejl. Dette kan ske, når en forkert værdi indtastes på trods af et gyldigt format. Et eksempel på dette ville være at indtaste værdien 34 for et tag for datoen. Meddelelsen ville så for eksempel lyde: "Marts måned har 31 dage. Indtast venligst tagget igen".

En anden type fejl er ugyldig input. Her angiver udvikleren værdier, der er ugyldige. Endelig er der fejltypen, når der ikke er foretaget input i obligatoriske felter. Dette sker for eksempel, hvis e-mailadressen er et obligatorisk felt, og inputtet er glemt. Ofte sker dette også med de generelle vilkår og betingelser. På mange websteder vil du ikke kunne fortsætte uden at acceptere denne erklæring.

Obligatoriske felter

Formularer indeholder ofte obligatoriske felter. Disse skal markeres som sådan. Et ofte brugt symbol til at angive et obligatorisk felt er et "*", der vises ved siden af formularfeltet. I dette tilfælde skal det dog påpeges lige i starten af formularen, at felterne markeret med en stjerne er obligatoriske felter. En anden mulighed er at vise disse obligatoriske felter i en anden farve eller skygge. Disse er dog ikke tilgængelige for alle. For at skærmlæserbrugere også kan genkende dem, bør attributten "required" eller "aria-required" også bruges. Dette fortæller skærmlæseren, at det er et obligatorisk felt.

Pladsholder

En måde at gøre formularer endnu mere forståelige og brugervenlige på er at bruge pladsholdere i formularfelter. Pladsholdere er midlertidige tekster, der vises i et formularfelt for at angive for brugeren, hvilken type information der skal indtastes. Disse tekster forsvinder, når der klikkes på eller fokuseres på formularfeltet, og kan erstattes med det faktiske indhold af formularfeltet. Pladsholdere kan nemt indsættes i HTML-inputelementet i et formularfelt ved hjælp af pladsholderattributten.

Gem input

Alle brugere skal have mulighed for at gemme deres indtastninger. Problemer opstår gang på gang med længere formularer. For at undgå datatab her kan de gemmes. Til dette formål kan der implementeres en knap, der gemmer den aktuelle status. Dette gør det så nemmere at udfylde komplekse formularer. Dette har også den fordel, at manglende indtastninger kan udfyldes på et senere tidspunkt. Dette skyldes, at gentagelse af disse indtastninger får nogle brugere til at stoppe med at udfylde formularen. Dette kan være irriterende for både operatøren af et websted og brugeren.

Godkendelse og tidsbegrænsning

Godkendelse øger sikkerheden på internettet. Det er dog også en af de barrierer, der bliver ved med at dukke op. Disse forekommer ofte på websteder, hvor login er påkrævet. Men for at disse kan være tilgængelige for alle, skal formularer være designet til at være barrierefri. Dette skyldes, at godkendelsesprocedurer i mange tilfælde er tidsbegrænsede. Folk har så meget lidt tid til at logge ind. Ofte er det kun 30 eller 60 sekunder. For mange mennesker med handicap er dette ikke nok tid til at logge ind. Derfor er det vigtigt ikke at begrænse inputtet af et tidsrum.

Captchaer udgør et andet problem. De bruges til at identificere brugeren som et menneske og ikke som en computer. Her bliver brugeren bedt om at identificere et forvrænget billede og indtaste resultatet i et formularfelt. Ofte skal der dog klikkes på alle billeder, for eksempel dem der viser en bil. Disse er dog ikke altid barrierefri. Blinde eller synshandicappede kan ikke genkende disse billeder. For at omgå denne barriere bør der tilbydes en lydmulighed.

Kort sagt er tilgængeligt design af formularfelter et vigtigt skridt på vejen mod et tilgængeligt digitalt miljø. Brugen af korrekte betegnelser, et klart og struktureret layout samt betjening via tastaturet og tilhørende fejlmeddelelser øger sandsynligheden for, at personer med handicap også vil være i stand til at udfylde formularerne selvstændigt.