Grunntanken bak universell utforming er å gjøre muligheter, tjenester og steder tilgjengelig for alle uavhengig av begrensninger et menneske lever med i sin hverdag.
En viktig del av dette samfunnsmålet er å gjøre alle nettsteder like tilgjengelige og brukervennlige for alle besøkende. Hvordan man oppnår det målet er en viktig problemstilling som har vært meget aktuell lenge.
I dette innlegget deler vi våre tips for å komme i gang med, og kanskje forbedre, hvordan du tester universell utforming i dag. Her kommer noen punkter som kan hjelpe deg i gang:
1. Bruk verktøy for testing av statisk kode
For å møte kravene for universell utforming må vi ha god kontroll på en nettsidens grunnleggende byggeklosser, HTML. Det kan være en krevende jobb der vanskelighetsgraden med å teste stiger i takt med produktets størrelse og omfang. Her finnes det heldigvis mange gode verktøy som kan hjelpe oss. De kommer i flere former, og dersom du ikke har benyttet noe tilsvarende før kan det være fint å starte med et som fungerer som et nettlesertillegg. Etter å ha installert verktøyet, besøker vi ganske enkelt siden vi ønsker å teste. Vi starter testen med å aktivere verktøyet som analyserer siden og gir oss en tilbakemelding på hvilke feil som er funnet. Noen verktøy kommer også med tips for hvordan feilene kan utbedres.
Flere av de kommende punktene utdyper klassiske feil som et slikt verktøy kan hjelpe oss med å finne.
Tips! Eksempel på slike nettlesertillegg kan være “Microsofts Accessibility insights for web”, “Wave” og “Axe”. Kjør den samme testen med et par forskjellige verktøy da de ofte oppdager ulike feil.
2. Sjekk om det er god nok kontrast mellom tekst og bakgrunn
Tekst må skille seg tydelig fra bakgrunnen den står mot slik at den er enkel å tyde. Dersom du lurer på hva som er godt nok har jeg gode nyheter. Du slipper å gjette på hva som er god kontrast. Her er det utformet tydelige regler for hvilken kontrast det skal være, slik at det er tydelig nok for de fleste brukere. Forholdstallene kan leses her.
Tips! Når vi ønsker å sjekke om to farger har god nok kontrast, kan vi for eksempel benytte en kalkulator som utfra fargenes RGB/Hex-verdier kan fortelle oss om kontrasten møter kravet.
Tips!! De statiske verktøyene nevnt i punkt 1 er gode hjelpere for å finne denne typen feil.
Last ned: Guide til effektiv applikasjonsforvaltning av skreddersydde løsninger
3. Bruk siden med bare tastatur
Dersom en bruker ikke kan eller ønsker å benytte en mus, er det viktig at alt innhold og alle funksjoner er tilgjengelige ved bruk av kun tastatur. Det er heldigvis ganske enkelt å teste. Vi bare bruker siden med bare tastatur og verifiserer at all funksjonalitet er tilgjengelig.
Noen spørsmål det er greit å ha i bakhodet når vi tester tastaturnavigering:
- Kommer elementene på nettsiden i en naturlig rekkefølge? Hopper du fra element til element i den rekkefølgen det er ønskelig at brukeren skal oppleve siden, eller spretter du vilt rundt og er spent på hvor du havner neste gang?
- Kan all funksjonalitet nås ved å bare benytte tastaturet, eller er det enkelte elementer du ikke når eller får aktivert?
- Er det noen tastaturblindveier? Kommer du deg alltid videre til neste element, eller er det mulighet for å bli sittende fast?
Med disse tingene i orden er vi et godt stykke på vei. Mer om reglene for tastaturnavigering kan leses her.
Tips! Det finnes noen morsomme verktøy som følger med når du navigerer rundt og tegner opp linjer mellom elementene i den rekkefølgen de besøkes. Disse kan være til hjelp for å tydeliggjøre hvordan elementene er kjedet og hvilken rekkefølge de kommer i. Nettlesertillegget nevnt i punkt 1, “Microsofts Accessibility insights for web”, har en funksjon for det.
4. Prøv forskjellige enheter, operativsystem og nettlesere
I dag benyttes webapplikasjoner på alle mulige enheter, med et utall forskjellige skjermstørrelser, nettlesere og operativsystem. Det gjør det viktig å sjekke at produktet fungerer, beholder funksjonene og oppfører seg som forventet, uavhengig av hva brukeren benytter for å besøke siden. Noen tips her er å besøke nettstedet med alle de forskjellige fysiske enhetene vi har tilgjengelig. Juster også størrelsen på nettleservinduet under bruk for å se hvordan applikasjonen responderer. Mange nettlesere har også innebygde emulatorer for å simulere forskjellige mobiltelefoner og nettbrett. Det er en enkel måte å få testet mange forskjellig enheter raskt.
Det er mange nettlesere på markedet og det er forskjeller mellom hvordan de tolker en side. Vi har ikke anledning til å teste alle, så tipset er å kjøre en sjekk med de vanligste nettleserne på markedet og se at applikasjonen fungerer som forventet. Dersom det er mulig, prøv å få fatt i brukshistorikken for nettstedet og se hvilke nettlesere og enheter som er mest brukt så kan du fokusere på å teste disse.
Tips! For testing på mange forskjellige enheter finnes det ulike tilbydere på markedet som gjør det mulig for deg å teste applikasjonen din på mange forskjellige enheter og versjoner av nettlesere uten å måtte kjøpe inn fysiske enheter. Disse verktøyene er ofte referert til som “Cross browser testing tools”.
Tips!! Husk at både nettleserer og operativsystemer har forskjellige versjoner, så finn ut hva applikasjonen skal støtte. To nettlesere er ikke nødvendigvis like selv om de heter det samme.
5. Bruk en skjermleser
Mange brukere benytter skjermleser. En skjermleser er et program som assisterer til navigering, samt leser opp innholdet for brukeren. For å forklare sidens innhold og struktur har vi ARIA-tags. Vi kan kalle det stikkord vi legger til HTML-elementene for å tilføre forklaringer og ekstra informasjon som hjelper brukere av denne typen teknologier til å forstå siden. Det finnes mange forskjellige slike ARIA-tags som hjelper til med å gjøre en side enklere å forstå, for eksempel kan vi definere rolle for seksjoner av siden, meny, filter osv. og vi kan gi elementer merkelapper og forklaringer som ikke vises for andre brukere. Ta en kikk på WC3 sine sider for flere typer ARIA-tags og mulighetene de gir.
Tips! Med HTML5 ble det lagt til mange nye typer elementer i standarden. Det betyr at det nå finnes standard HTML-elementer der vi før måtte benytte ARIA-tags for å forklare. Benytt standard-elementer der du kan.
Tips!! Benytt en skjermleser for å skaffe forståelse for hvordan siden fortoner seg ved bruk av denne typen verktøy.
6. Forklar bilder med alternativ tekst
Når vi bruker bilder og illustrasjoner på nettstedet er det viktig at vi husker å fylle ut bildets alt-tag med en god forklaring på bildets innhold eller hva vi ønsker å formidle med bildet. Det er viktig slik at brukere som for eksempel benytter skjermleser eller lignende ikke går glipp av informasjon eller funksjonalitet. Det gjelder spesielt om bildet supplerer teksten, eller er viktig for helhetsinntrykket av det vi ønsker å formidle. Beskrivelsen av bildet bør være kort og ikke inneholde for mange detaljer. Dersom bildet ikke er essensielt for forståelsen, eller er rent dekorativt, trenger vi ikke å beskrive bildets innhold. Alt-taggen må fremdeles være tilstede, men kan i disse tilfellene være tom. Les mer om alt-tags her.
Oppsummering
Dette var seks raske tips til hvordan du kan komme i gang med testing av universell utforming for dine produkter slik at de både møter oppsatte krav og gir en god brukeropplevelse for flest mulige brukere. Her er det mye og viktige ting å ta tak i, så det er bare å sette i gang. Hele regelverket med norske forklaringer finner du på DIFIs sider.