Du behøver ikke nødvendigvis et stort audit, et avanceret værktøj eller en konsulent for at finde de første problemer på din hjemmeside.
Du kan begynde med noget, du allerede har foran dig:
Dit tastatur.
Læg musen væk.
Åbn din hjemmeside og tryk på Tab.
Kan du komme hen til menuen?
Kan du se, hvilket link eller hvilken knap du står på?
Kan du udfylde kontaktformularen?
Kan du komme videre til næste felt?
Kan du åbne en popup – og lukke den igen?
Hvis svaret er nej et eller andet sted undervejs, har du allerede fundet et tilgængelighedsproblem.
Og den test kostede præcis nul kroner.
Hvorfor er tastaturtesten så vigtig?
Ikke alle bruger en mus.
Nogle mennesker navigerer på nettet med tastaturet, og forskellige hjælpemidler bygger også på, at hjemmesidens funktioner kan betjenes uden en traditionel mus.
Derfor stiller WCAG krav om, at funktionalitet skal kunne betjenes via tastatur.
W3C fremhæver også to ting, du ret hurtigt kan undersøge selv:
- Kan du nå de interaktive elementer med tastaturet?
- Kan du tydeligt se, hvilket element der har fokus?
Det sidste kaldes synligt fokus. WCAG beskriver kravet om synligt tastaturfokus her.
Det er typisk en kant, streg eller anden markering omkring den knap eller det link, du står på.
Hvis markeringen er fjernet i designet, kan du ende med at trykke Tab igen og igen uden at ane, hvor på siden du befinder dig.
Det er omtrent lige så praktisk som at navigere rundt i et mørkt rum.
Test 1: Brug kun Tab-tasten
Start på toppen af hjemmesiden.
Tryk derefter på Tab igen og igen.
På de fleste hjemmesider bør du kunne bevæge dig gennem interaktive elementer som:
- links
- menupunkter
- knapper
- formularfelter
- dropdown-menuer
- søgefunktion
- popup-elementer
- checkout eller booking
Brug typisk Enter eller mellemrum til at aktivere elementerne og Shift + Tab til at bevæge dig baglæns.
W3C har faktisk lavet en hel samling af enkle tilgængelighedstjek, man selv kan udføre, og tastaturnavigation og synligt fokus er blandt dem.
Hold især øje med tre ting
1. Kan du komme til alt?
Hvis et menupunkt, en knap eller et formularfelt kun kan nås med musen, er det et problem.
2. Kan du se, hvor du er?
Der skal være en tydelig visuel markering af det element, der har tastaturfokus.
3. Kommer elementerne i en logisk rækkefølge?
Tab-tasten bør ikke sende dig fra toppen af siden til footeren, tilbage til menuen og derefter ind i en formular midt på siden.
Rækkefølgen skal give mening.
Test din menu ekstra grundigt
Menuer er et rigtig godt sted at teste.
Især hvis hjemmesiden har dropdown-menuer.
Prøv uden mus:
- Gå ind på hjemmesiden.
- Tryk Tab, indtil du når menuen.
- Bevæg dig gennem menupunkterne.
- Prøv at åbne eventuelle undermenuer.
- Prøv at vælge et link.
- Prøv også at lukke menuen igen.
Det samme gælder mobilmenuer.
Hvis du har en burger-menu, bør du teste, om den faktisk kan åbnes og bruges med tastatur.
En menu er trods alt ikke meget værd, hvis nogle af brugerne ikke kan komme videre fra den.
Test 2: Prøv din kontaktformular
Formularer er et andet klassisk sted, hvor problemer gemmer sig.
Prøv eksempelvis jeres kontaktformular helt uden mus.
Kan du bevæge dig gennem alle felterne?
Og kan du forstå, hvad der skal stå i dem?
Et formularfelt bør have en tydelig label, som teknisk er knyttet til feltet. Det gør det blandt andet muligt for hjælpemidler at fortælle brugeren, hvad feltet betyder. W3C har en praktisk vejledning til labels og tilgængelige formularer.
Prøv også med vilje at lave fejl.
Lad eksempelvis et obligatorisk felt stå tomt.
Hvad sker der?
Får du:
“Indtast din e-mailadresse”
eller får feltet bare en rød kant?
En rød kant kan være let at se for nogle brugere, men den forklarer ikke nødvendigvis problemet til alle. Fejlbeskeder bør gøre det forståeligt, hvad der er galt, og hvor fejlen ligger. W3C har eksempler på tilgængelige fejlbeskeder i formularer her.
Test 3: Tjek kontrasten
Den næste test kræver faktisk ikke meget mere end dine øjne.
Kan teksten læses tydeligt?
Grå tekst på en næsten hvid baggrund ser måske elegant ud på designerens store skærm.
Men den kan være svær at læse for personer med nedsat syn – og faktisk også bare for almindelige mennesker på en dårlig mobilskærm ude i solen.
Hvis du vil kontrollere det mere præcist, kan du bruge WebAIM Contrast Checker.
Her indtaster du tekstens farve og baggrundsfarven og får kontrastforholdet med det samme. Værktøjet viser også, om kombinationen opfylder de relevante WCAG-niveauer.
Det er gratis og tager typisk under et minut at kontrollere en farvekombination.
Tjek især:
- almindelig brødtekst
- lyse tekster
- knapper
- links
- tekst oven på billeder
- formularfelter
Test 4: Zoom hjemmesiden ind
En anden overraskende effektiv test er:
Zoom ind.
Prøv eksempelvis at sætte browserenBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere til 200 %.
Kan du stadig:
- læse teksten?
- bruge menuen?
- se alle knapper?
- udfylde formularen?
- komme videre uden vandret scrolling over hele siden?
- forstå, hvad der hører sammen?
Hvis elementer begynder at ligge oven i hinanden eller forsvinde, har du fundet noget, der bør undersøges.
W3C anbefaler tekstforstørrelse som et af de enkle områder, man kan kontrollere i en indledende tilgængelighedstest.
Det er også værd at teste på både computer og mobil.
Test 5: Kig på dine billeder
Billeder er et andet nemt sted at begynde.
Et billede kan have en alternativ tekst, ofte bare kaldet alt-tekst.
Det er en tekstbeskrivelse, som blandt andet kan bruges af en skærmlæser, når personen ikke kan se billedet.
Men det betyder ikke, at alle billeder skal have en lang beskrivelse.
Et rent dekorativt billede kan eksempelvis have tom alt-tekst, mens et billede, der formidler vigtig information, bør have en relevant tekstbeskrivelse.
W3C har en rigtig god vejledning om alt-tekster til forskellige typer billeder.
På en WordPress-side kan du derfor begynde med at kigge i mediebiblioteket og på de vigtigste sider.
Men lad være med bare at fylde alle felterne med noget tilfældigt.
“image123.jpg” er teknisk set tekst.
Det gør den ikke nyttig.
Test 6: Kig på dine overskrifter
Overskrifter er ikke kun store, fede tekster.
De fortæller også noget om sidens struktur.
En typisk side kan eksempelvis være bygget sådan:
H1: Sidens titel
H2: Et hovedafsnit
H3: Et underafsnit under H2
H2: Næste hovedafsnit
For brugere af skærmlæsere kan overskrifter bruges til hurtigt at navigere gennem siden.
Derfor bør de bruges som struktur – ikke bare fordi man synes, at H3 tilfældigvis har den rigtige skriftstørrelse.
W3C forklarer hvordan overskrifter bør bruges til at strukturere en side her.
I WordPressWordPress er et open source content management system (CMS). WordPress kan hentes gratis og benyttes til at bygge hjemme... Mere er det derfor en god idé at kontrollere, om overskrifter faktisk er sat som H1, H2, H3 osv. – og om rækkefølgen giver mening.
Gratis værktøj 1: WAVE
Når du har lavet de manuelle tjek, kan du få computeren til at hjælpe.
Et af de nemmeste værktøjer at komme i gang med er WAVE Web Accessibility Evaluation Tool.
Du skriver bare adressen på den side, du vil teste.
WAVE gennemgår derefter siden og markerer blandt andet potentielle fejl og ting, som kræver nærmere vurdering. Der findes også browserudvidelser til Chrome, Firefox og Edge.
Det er især nyttigt til at få øje på ting som:
- manglende alt-tekster
- problemer med formularer
- overskriftsstruktur
- kontrastproblemer
- forskellige tekniske tilgængelighedsproblemer
Men WAVE siger selv meget klart, at værktøjet ikke kan afgøre, om din hjemmeside er tilgængelig.
Det kan hjælpe et menneske med at finde og vurdere problemer.
Og den forskel er vigtig.
Gratis værktøj 2: Lighthouse i Chrome
Hvis du bruger Chrome, har du allerede et tilgængelighedsværktøj installeret.
Det hedder Lighthouse og findes i Chrome DevTools.
Lighthouse kan blandt andet teste:
- performance
- SEOSEO (Search engine optimization) er en betegnelse for søgemaskine optimering. En god SEO giver gode resultater i eksempe... Mere
- best practices
- tilgængelighed
Google beskriver Lighthouse og hvordan det bruges her.
Det giver dig en accessibility-score og viser en række automatiske tests, som siden består eller fejler.
Det er nemt at blive lidt forelsket i tallet:
97 – fantastisk!
Men pas på.
Lighthouses accessibility-score bygger på de automatiske audits, værktøjet kan udføre. Det betyder ikke, at alt det, der kræver menneskelig vurdering, nødvendigvis er testet.
En høj score er altså god.
Den er bare ikke et certifikat.
Gratis værktøj 3: axe DevTools
Et andet godt værktøj er axe DevTools browser extension.
Der findes en gratis version, som kan udføre grundlæggende automatiske tilgængelighedstests direkte i browserenBrowseren er den som man ser hjemmesiden igennem. Eksempler på browsere er Chrome, Edge, Firefox og Safari. Mere.
Den er især nyttig, hvis du gerne vil lidt længere ned i de tekniske problemer.
Når den finder en fejl, får du typisk information om:
- hvilket element problemet ligger på
- hvilken regel det rammer
- hvorfor det er et problem
- hvad en udvikler bør undersøge
Det er ikke nødvendigvis det første værktøj, vi ville give til en kunde, der bare vil lave et hurtigt tjek.
Men for en webansvarlig eller udvikler er det rigtig brugbart.
Gratis værktøj 4: En skærmlæser
Hvis du virkelig vil se din hjemmeside fra en anden vinkel, kan du prøve en skærmlæser.
På Windows findes eksempelvis NVDA, som er gratis og open source.
En skærmlæser forsøger at præsentere hjemmesidens indhold som tekst og struktur i stedet for primært visuelt.
Når man første gang prøver sin egen hjemmeside med en skærmlæser, kan det være lidt af en øjenåbner.
Pludselig opdager man måske, at:
“Klik her”
ikke fortæller ret meget, når linket bliver læst uden den omkringliggende tekst.
Eller at en knap slet ikke har noget navn.
Eller at menuen bliver læst op på en meget mærkelig måde.
Du bliver ikke ekspert i skærmlæsere på ti minutter.
Men testen kan gøre nogle ellers usynlige problemer meget tydelige.
Hvilket værktøj skal du starte med?
Hvis du aldrig har arbejdet med tilgængelighed før, ville vi gøre det i denne rækkefølge:
- Brug hjemmesiden med tastatur.
- Zoom til 200 %.
- Test en formular og fremprovokér fejl.
- Kør siden gennem WAVE.
- Kontroller problematiske farver med Contrast Checker.
- Kør eventuelt Lighthouse eller axe bagefter.
Og vigtigst:
Test ikke kun forsiden.
Hvis hjemmesiden er en webshop, så prøv hele købsforløbet.
Hvis det er en bookingside, så prøv at gennemføre en booking.
Hvis kontaktformularen er jeres vigtigste konvertering, så test den.
Det er dér, tilgængelighedsproblemer for alvor bliver interessante.
Automatiske tests finder ikke alt
Det her er nok den vigtigste pointe i hele artiklen.
Du kan godt få:
100 point
i et automatisk værktøj og stadig have en hjemmeside, som er vanskelig eller umulig at bruge for bestemte mennesker.
W3C skriver direkte, at intet enkelt værktøj kan afgøre, om en hjemmeside opfylder tilgængelighedsstandarderne, og at en mere omfattende evaluering kræver mere end de enkle automatiske kontroller.
Hvorfor?
Fordi nogle ting kræver menneskelig vurdering.
Et værktøj kan eksempelvis kontrollere:
Findes der en alt-tekst?
Et menneske skal stadig vurdere:
Er alt-teksten god?
Et værktøj kan finde en overskrift.
Et menneske skal vurdere, om overskriften giver mening.
Et værktøj kan finde en knap.
Et menneske kan opdage, at knappen hedder “Læs mere” ligesom 17 andre knapper på samme side.
Automatiske værktøjer er derfor gode hjælpere.
De er ikke facitlisten.
W3C har faktisk lavet en gratis startguide
Hvis du gerne vil gå systematisk til værks uden at købe noget, er W3C’s egen guide et rigtig godt udgangspunkt:
Easy Checks – A First Review of Web Accessibility
Den gennemgår blandt andet:
- sidetitler
- alt-tekster
- overskrifter
- kontrast
- tekstforstørrelse
- tastaturnavigation
- synligt fokus
- formularer
- multimedier
- sidens grundlæggende struktur
W3C understreger samtidig, at disse tjek er beregnet som en første gennemgang og ikke som en fuld tilgængelighedsvurdering.
Det synes vi egentlig er en ret god måde at se det på.
Start med det, du selv kan finde
Hvis din virksomhed er omfattet af tilgængelighedskrav, er en hjemmelavet test selvfølgelig ikke nødvendigvis nok til at dokumentere, at løsningen opfylder alle relevante krav.
Men det betyder ikke, at du skal vente med at gøre noget, til nogen har tid til at lave en komplet gennemgang.
Du kan begynde i dag.
Læg musen væk.
Tryk på Tab.
Hvis du efter fem tryk allerede ikke aner, hvor du befinder dig, har du fundet det første sted at kigge.
Og finder du 15 fejl med WAVE bagefter, er det også helt fint.
Så ved du mere, end du gjorde før.
Det er egentlig hele pointen med de gratis værktøjer:
De gør dig ikke færdig med tilgængelighed.
Men de gør det meget nemmere at komme i gang.