🎉 Nytt verktøy: Enkelt språk. Klikk på knappen og prøv det live

Hvordan er skjemaelementer utformet for å være tilgjengelige?

Ung kvinne sitter forvirret foran en bærbar datamaskin.

Del innlegg:

Ung kvinne sitter forvirret foran en bærbar datamaskin.

Hvordan er skjemaelementer utformet for å være tilgjengelige?

Del dette innlegget:

Ung kvinne sitter forvirret foran en bærbar datamaskin.

Alle har på et eller annet tidspunkt måttet forholde seg til skjemaer. Før i tiden var det mer på papir. I dag er de i økende grad digitale skjemaer, ettersom de brukes til brukerinteraksjon med et nettsted. Enten det er når man kommuniserer på Internett eller bestiller en vare, kan man finne dem overalt. Søk på Internett, for eksempel med Google, påvirkes også. Det er vanskelig å fylle ut disse skjemaene for personer med fysiske eller kognitive funksjonsnedsettelser, samt for blinde og svaksynte. For at alle skal kunne delta i det offentlige liv, må disse skjemaene utformes slik at de er tilgjengelige. Men hvordan lager man egentlig tilgjengelige skjemaelementer?

Det finnes ulike teknikker for dette. Men før du setter deg inn i teknikkene, bør du først gjøre deg kjent med skjemaelementene. Disse kan kategoriseres i ulike typer. Det finnes blant annet følgende typer

  • Inndatafelt med én linje
  • inndataområder med flere linjer
  • Utvalgslister
  • Radioknapper
  • Avmerkingsbokser
  • Knapper for å sende/avbryte

Merking av skjemafelt

For å oppnå tilgjengelighet i skjemaer må de ulike kontrollelementene merkes. Disse merkelappene gjør det mulig for hjelpeteknologiene å gjenkjenne funksjonene til kontrollene og videreformidle dem til brukeren. Det er viktig at etikettene er tydelig knyttet til kontrollene, ellers vil skjermlesere ikke kunne etablere en forbindelse til elementene. Resultatet blir at brukerne får problemer med å forstå skjemaet. De kan ikke se hvilken informasjon som skal skrives inn i hvilke felt. Resultatet er at de ikke klarer å fylle ut skjemaet på riktig måte og ofte gjør feil. Alle beskrivelsene er imidlertid ikke merket på samme måte. Det avgjørende er om de skal være synlige for alle eller ikke. I programmeringsspråket HTML skiller man derfor mellom label-elementet og aria-attributtene. Label-elementet brukes for inndatafelt, valglister, radioknapper og avkrysningsbokser og må plasseres i henhold til dette. For inndatafelt og valglister plasseres etiketten før kontrollelementene. For radioknapper og avkrysningsbokser plasseres de derimot etter kontrollelementet. For at etikettene også skal kunne knyttes til det tilhørende elementet, må for-attributtet legges til.

 

Attributtet aria brukes i HTML for knapper. Knapper kan for eksempel representere send- eller avbryt-funksjonen i et skjema. Med aria-attributter er beskrivelsene av de respektive elementene bare gjenkjennelige for hjelpeteknologier. De kan derfor også brukes til inndatafelt som bare skal være synlige for skjermleseren. Det finnes mange aria-attributter som brukes for å forbedre tilgjengeligheten på Internett. Disse varierer imidlertid i type og funksjon. Den såkalte aria-label brukes til å merke et element. Det er selvfølgelig også mulig å bruke samme etikett for flere elementer. Dette er mulig ved hjelp av en aria-labelledby.

Inndatafelt med én eller flere linjer

Inndatafelt er blant de mest brukte elementene i skjemaer. De kan bestå av én eller flere linjer. Felter med én linje brukes til korte spørsmål, f.eks. etter en persons navn, en e-postadresse, en gate eller en by.

De opprettes i HTML med input-taggen og type-attributtet.

Du kan også legge til flere attributter, for eksempel for å definere linjelengden.

Flerlinjede felt brukes vanligvis til større tekstområder, for eksempel tekstmeldinger. Disse opprettes da med textarea-taggen. Også her kan utvikleren angi antall linjer og linjelengde. For å gjøre disse feltene tilgjengelige, må man imidlertid legge til label-taggen. Det er imidlertid ikke mulig å opprette en kobling mellom etiketten og elementene hvis disse ikke er tydelig tilordnet. Disse må da knyttes til hverandre via for-attributtet og id-attributtet. I det følgende HTML-eksempelet er enkle etiketter implementert i slike inndatafelt.

 

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

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

<br />

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

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

 

Her opprettes først et enlinjers inndatafelt for fornavnet med typen "text". Etiketten "Your first name:" gjøres synlig for alle ved hjelp av label-elementet. Dette er plassert før input-elementet, ettersom det sendes ut før input-feltet. Disse områdene er knyttet til hverandre via for-attributtet i label-taggen og id-attributtet i input-elementet. Her er det viktig at innholdet er identisk, ellers kan de ikke kobles sammen. name-attributtet fungerer som en identifikator for dette feltet og er nødvendig for å overføre dataene til en serverside.

Deretter opprettes et inndatafelt med flere linjer ved hjelp av taggen "textarea". Label-elementet viser deretter bildeteksten "Your message:". Også her er de to områdene med samme tekstinnhold knyttet til hverandre ved hjelp av attributtene for og id.

Generell informasjon

Generelt bør skjemaene være klare og entydige. Forutsigbarhet er også svært nyttig. Det gjør at brukerne raskt kan gjenkjenne hva som kreves av dem. En klar og fornuftig struktur er også svært viktig. Relaterte innholdselementer kan grupperes sammen. Logisk adskilte enheter kan også skilles fra hverandre visuelt. Dette gjør det enklere å orientere seg. De kan også skilles fra hverandre ved hjelp av farger. Det er viktig at minimumskontrasten på 4,5:1 opprettholdes.

Tastaturets brukervennlighet

En av de viktigste funksjonene for universell utforming av skjemafelt er at de kan betjenes via tastaturet. Det finnes mennesker som ikke kan bruke mus på grunn av funksjonsnedsettelser. Da er det desto viktigere å utforme skjemaene slik at de også kan navigeres ved hjelp av tastaturet. Bruk av label-elementer og aria-attributter gjør det lettere å forstå og bruke skjemaer. En annen måte å forenkle bruken av tastaturet på er å bruke hurtigtaster. Her kan skjemaelementer tildeles tastekombinasjoner. Dette kan bidra til at man kommer raskere til bestemte områder eller kan bruke funksjoner raskere. Til dette formålet brukes accesskey-attributtet i HTML. Dette attributtet legges til i det elementet det skal brukes for. Tasten som skal brukes til tastaturkommandoen, tilordnes ganske enkelt der. Hvis du for eksempel tilordner tasten "n" til et felt eller en knapp, kan den betjenes i Windows ved hjelp av hurtigtasten (Alt + n).

Det er imidlertid viktig å forsikre seg om at denne snarveien ikke allerede brukes til en annen kommando i nettleseren.

Reduksjon til et minimum

Det er også tilrådelig å redusere hele prosessen til det vesentlige for ikke å legge en unødvendig byrde på personer med nedsatt funksjonsevne. Derfor bør man bare be om de absolutt nødvendige opplysningene. Eksisterende data bør ikke etterspørres. I tillegg kan synligheten til skjemafeltene tilpasses situasjonen. Valgfrie inndatafelt eller felt som er knyttet til betingelser, trenger ikke å være synlige. De kan vises hvis de er påkrevd. Det gir for eksempel ingen mening å spørre om barnas alder hvis du på forhånd har valgt at det ikke finnes barn.

Hjelp og feilmeldinger

Det bør også tilbys inndatahjelp. Dette kan være i form av et dialogvindu eller et verktøytips. Disse kan brukes til å forklare inndataene mer i detalj. Et annet alternativ er å lenke til en egen hjelpeside. Dette vil øke suksessraten enormt. Det skjer fortsatt feil. Da er det viktig med meningsfulle feilmeldinger. Hvis du for eksempel har tastet inn feil passord ved innlogging, bør ikke meldingen "Brukernavn eller passord er feil" vises. Det er bedre å filtrere feilen. Korrekt her ville være: "Passordet du har oppgitt er feil. Vennligst skriv inn riktig passord". 

Det finnes forskjellige typer feil. For det første formatfeilen. Her er passordet skrevet inn i feil format. For eksempel skrives bokstaver inn i stedet for tall. Det kan også oppstå verdifeil. Dette kan skje hvis en feil verdi legges inn til tross for et gyldig format. Et eksempel på dette kan være at du skriver inn verdien 34 for en dag i datoen. Meldingen vil da lyde: "Mars måned har 31 dager. Vennligst skriv inn dagen på nytt".

En annen type feil er ugyldige oppføringer. Her angir utvikleren verdier som er ugyldige. Til slutt har vi feiltypen der det ikke er gjort noen oppføring i obligatoriske felt. Dette skjer for eksempel hvis e-postadressen er et obligatorisk felt og man har glemt å oppgi det. Dette skjer imidlertid også ofte med de generelle vilkårene og betingelsene. På mange nettsteder kan du ikke fortsette uten å godta denne erklæringen.

Obligatoriske felt

Skjemaer inneholder ofte obligatoriske felt. Disse må merkes som slike. Et ofte brukt symbol for å indikere et obligatorisk felt er en "*", som vises ved siden av skjemafeltet. I dette tilfellet bør det imidlertid angis i begynnelsen av skjemaet at feltene som er merket med en stjerne, er obligatoriske. Et annet alternativ er å vise disse obligatoriske feltene i en annen farge eller nyanse. Disse er imidlertid ikke tilgjengelige for alle. For at også skjermlesere skal kunne gjenkjenne dem, bør man også bruke attributtet required eller aria-required. Dette informerer skjermleseren om at det er et obligatorisk felt.

Plassholder

En måte å gjøre skjemaer enda enklere å forstå og mer brukervennlige på, er å bruke plassholdere i skjemafeltene. Plassholdere er midlertidige tekster som vises i et skjemafelt for å indikere for brukeren hvilken type informasjon som skal fylles inn. Disse tekstene forsvinner så snart man klikker eller fokuserer på skjemafeltet, og kan erstattes av det faktiske innholdet i skjemafeltet. Plassholdere kan enkelt settes inn i HTML-inndataelementet i et skjemafelt ved hjelp av attributtet placeholder.

Lagre oppføringer

Alle brukere bør ha mulighet til å lagre oppføringene sine. Det oppstår alltid problemer med lengre skjemaer. For å unngå tap av data her, kan disse lagres. En knapp som lagrer gjeldende status, kan implementeres for dette formålet. Dette gjør det enklere å fylle ut komplekse skjemaer. Det har også den fordelen at manglende oppføringer kan legges til på et senere tidspunkt. Gjentatte utfyllinger kan nemlig føre til at noen brukere ikke fyller ut skjemaet videre. Dette kan være irriterende for både nettstedsoperatøren og brukeren.

Autentisering og tidsbegrensning

Autentisering øker sikkerheten på Internett. Det er imidlertid også en av barrierene som dukker opp gang på gang. Disse oppstår ofte på nettsteder der det kreves innlogging. Men for å sikre at disse er tilgjengelige for alle, må skjemaene utformes slik at de er barrierefrie. I mange tilfeller er autentiseringsprosedyrene tidsbegrenset. Man har da svært kort tid på seg til å logge inn. Det er ofte bare 30 eller 60 sekunder. For mange personer med nedsatt funksjonsevne er dette ikke nok tid til å logge inn. Det er derfor viktig å ikke sette en tidsbegrensning for innlogging.

Captchas utgjør et ytterligere problem. De brukes til å identifisere brukeren som en person og ikke som en datamaskin. Her blir brukeren bedt om å identifisere et forvrengt bilde og skrive inn resultatet i et skjemafelt. Ofte er det imidlertid nødvendig å klikke på alle bilder som for eksempel viser en bil. Disse er imidlertid ikke alltid tilgjengelige. Blinde eller svaksynte kan ikke gjenkjenne disse bildene. For å overvinne denne barrieren bør det tilbys et lydalternativ.

 

Oppsummert kan man si at tilgjengelig utforming av skjemafelter er et viktig skritt i retning av et tilgjengelig digitalt miljø. Bruk av korrekt merking, et oversiktlig og strukturert oppsett samt betjening via tastatur og tilhørende feilmeldinger øker sannsynligheten for at også personer med nedsatt funksjonsevne skal kunne fylle ut skjemaene på egen hånd.

Enkelt for alle

Er du interessert? Vi hjelper deg gjerne.

Med over 25 funksjoner knyttet til digital tilgjengelighet hjelper Eye-Able deg også med å redusere barrierene dine på lang sikt. Du kan gjøre informasjonen din tilgjengelig for alle uten å ekskludere noen besøkende - kort sagt: du kan nå en ny målgruppe uten store markedsføringsvolum.

Ikonet viser tilgjengelighetsfigur

Rådgivningsintervju

Ikke-bindende høring om digital tilgjengelighet generelt

Ikonet viser tilgjengelighetsfigur

Analyse

Diskusjon om mulig optimaliseringspotensial på nettstedet ditt

Ikonet viser tilgjengelighetsfigur

Live-demo

Presentasjon av assistanseprogramvaren direkte på nettstedet ditt

Ytterligere bidrag

Hvis du vil ha litt mer: