10 typiske (WCAG) fejl på danske hjemmesider
Som hjemmesideejer er det vigtigt, at jeres hjemmeside er tilgængeligt og skaber en god brugeroplevelse for alle besøgende uanset deres forudsætninger.
Med den seneste udvidelse af tilgængelighedskravene (WCAG) jf. EU-direktivet (European Accessibility Act) er det ikke længere kun offentlige instanser, der skal arbejde aktivt med webtilgængelighed. Nu gælder kravene også for mange private virksomheder. Og selv for dem, der ikke er lovmæssigt forpligtede, giver det god mening at sikre hjemmesidernes tilgængelighed.
WCAG står for Web Content Accessibility Guidelines og bygger på fire grundprincipper: Perceivable, Operable, Understandable og Robust – også kendt som POUR-principperne. Hvis I ikke er bekendt med WCAG-standarden og hvad de enkelte principper indebærer, har vi skrevet mere om det her.
Vi har samlet nogle af de fejl vi oftest ser på hjemmesider sammen med gode råd til, hvordan I retter dem. Vi har inddelt fejlene efter POUR-principperne, så I hurtigt kan danne jer et overblik:
Perceivable: Indholdet skal kunne opfattes
Perceivable handler om, at alt indhold på hjemmesiden skal kunne opfattes af brugerne, uanset om de ser, hører eller interagerer med siden på andre måder. Det betyder fx, at billeder skal have alt-tekster, videoindhold skal kunne forstås uden lyd, og tekst skal kunne læses med skærmlæser.
I kan ikke forvente, at alle brugere ser eller oplever indholdet på hjemmesiden på samme måde, og derfor handler WCAG om, at informationen skal præsenteres på en måde, der gør den tilgængelig for forskellige sansetyper.
Med alt-tekster på billederne på hjemmesiden har skærmlæsere mulighed for at formidle billedindhold til blinde og svagtseende. Vi ser ofte, at billeder har enten ingen alt-tekst, eller også står der blot noget intetsigende som “billede1.”. Dermed kan skærmlæsere heller ikke formidle indholdet på et billede.
Når I tilføjer alt-tekster (alternative tekster) til billederne på jeres hjemmeside, skal I derfor sørge for, at disse er beskrivende og informative.
For brugere med nedsat syn eller farveblindhed, er det vigtigt, at der er en høj kontrast mellem tekst og baggrund. Hvis kontrasten er for lav, kan det nemlig være svært at læse. Derfor er det en god idé at teste kontrasten mellem to farver på fx WebAIM Contrast Checker – her kan I hurtigt se, om kontrasten opfylder minimumsgrænserne i WCAG (mindst 4.5:1 for brødtekst).
Det er vigtigt, at al information på hjemmesiden kommunikeres til alle brugerne uanset deres forudsætninger. Derfor er det vigtigt, at fx fejlmeddelelser ikke kun markeres med farve, da skærmlæsere ikke ser dette – og dermed er der også risiko for at nogle brugere ikke ser det.
For at sikre at al information er tilgængelig for alle (også skærmlæsere), bør I supplere farver med fx tekst eller ikoner. Det kan være i kontaktformularer, hvor I tilføjer en fejlbesked som ”Dette felt skal udfyldes” i stedet for kun at markere med en rød ramme om feltet.
Operable: Indholdet skal kunne bruges med tastatur og hjælpemidler
Operable handler om, at hjemmesidens funktioner skal kunne betjenes af alle brugere, uanset de benytter en mus, et tastatur eller hjælpemidler som øjenstyring eller stemmestyring. Mange brugere med motoriske udfordringer eller synsnedsættelser navigerer udelukkende med tastatur, og det kræver, at alle interaktive elementer fungerer uden brug af mus.
Derfor er det også vigtigt, at I sikrer, at alle funktioner på jeres website er fuldt tilgængelige uden mus – uanset om brugeren benytter tastatur, skærmlæser eller alternative inputmetoder. Det kræver korrekt semantisk HTML, gennemtænkt interaktionsdesign og understøttelse af hjælpemidler.
Mange websites indeholder elementer som fx dropdown-menuer eller burger-menuer, som kun virker med mus. Det betyder, at brugere, der er afhængige af tastaturnavigation, ikke kan navigere rundt på hjemmesiden.
Dette kan I let selv teste: Kan I åbne dropdown-menuen på jeres hjemmeside? Kan I generelt navigere rundt på hjemmesiden ved hjælp af tastaturet (Tab, Enter, Esc, Shift+Tab m.fl.)
For at sikre, at hjemmesidens elementer kan tilgås med tastaturet, skal I sikre, at hjemmesidens HTML er opsat korrekt, fx <button> frem for <div>. Derudover bør I supplere med ARIA-attributter, hvor nødvendigt.
Når brugere navigerer med tastatur, skal de kunne se, hvor de befinder sig, fx hvilken knap, link eller formularfelt der er aktivt. Det kan gøres ved at sikre, at der er en synlig kant rundt om det markerede element eller en understregning m.v. Hvis der ikke er en tydelig fokusmarkering, risikerer I, at jeres brugere farer vild i navigationen.
Sørg derfor for at tilføje den nødvendige CSS-styling, som gør fokus synligt (fx outline eller border-effekter). Undgå at slå det fra med outline: none.
Når brugerne navigerer via tastaturet (samt skærmlæsere), skal de typisk gennemgå lange menuer eller gentagne elementer, før de når hovedindholdet. For skærmlæser- eller tastaturbrugere kan det være både frustrerende og tidskrævende. Derfor er det en god idé at have et skjult men fokuserbart link i toppen af siden (typisk det første element i HTML’en), som lader brugeren springe direkte til hovedindholdet. Dette kaldes et “skip to content”-link. Linket kan fx vises, når det får fokus via tastatur.
Understandable: Indholdet skal være forståeligt
Understandable handler om, at både indhold og funktioner skal være nemme at forstå og forudsige. Også for brugere med kognitive udfordringer eller begrænset teknisk erfaring. Det betyder altså, at brugerne skal kunne aflæse indholdet, forstå navigationen og forudsige, hvad der sker, når de klikker på noget. Understandable handler altså om at skabe tydelighed, konsistens og forudsigelighed. Det kan I gøre på flere forskellige måder:
Linktekster og knapper med teksten “Læs mere” eller “Klik her” giver kun mening, hvis man ser dem i sammenhæng med det visuelle indhold omkring dem. For brugere med skærmlæser, som ofte hopper direkte fra link til link, er denne type linktekster ubrugelige. De fortæller intet om, hvor linket fører hen.
I skal i stedet sørge for at skrive beskrivende linktekster. I stedet for at skrive ”Læs mere”, kan I skrive “Læs mere om vores priser”. Så ved brugerne i højere grad, hvad der linkes videre til. Hvis I er i tvivl, så prøv selv at læse kun linkteksten – giver den mening uden det omkringliggende indhold?
Hvis navigationen på jeres hjemmeside ændrer sig fra side til side, kan det være svært for nogle brugere at finde rundt – og det skaber forvirring. På samme måde kan det skabe forvirring, hvis overskrifter bruges vilkårligt på hver side. Derfor er det vigtigt at skabe en ensartet navigation på tværs af hele hjemmesiden.
Sørg for at placeringen og navngivningen af menupunkter, knapper og overskrifter er konsekvente. Sørg også for at bruge de samme overskriftsniveauer og hierarkier (fx H1 til titel, H2 til sektioner, H3 til underpunkter osv.), så brugeren nemt kan orientere sig – også med skærmlæser.
Robust: Indholdet skal kunne fortolkes korrekt af forskellige brugeragenter
Robust handler om, at hjemmesidens kode og struktur skal være så teknisk velfunderet, at den kan fortolkes korrekt af forskellige teknologier – både i dag og i fremtiden. Det betyder, at både almindelige browsere og hjælpemidler som skærmlæsere skal kunne læse og forstå siden uden problemer.
Robusthed er derfor især vigtig for teknisk vedligehold, fremtidssikring og kompatibilitet på tværs af platforme.
På mange hjemmesider bruges overskrifter primært til visuel styling – uden at tage hensyn til den logiske struktur. Det betyder, at man fx springer fra en H1 til en H4, eller at H2 bruges til designformål, selvom det ikke er en reel overskrift. Det forvirrer både søgemaskiner og brugere med skærmlæsere, som navigerer i indholdet ud fra overskrifterne.
Derfor bør I sikre, at I bruger overskrifter logisk og hierarkisk (H1 til H6). Hver side bør kun have én H1, og dernæst H2 til H6 i korrekt rækkefølge. H3 er fx til underafsnit under H2 osv.
Semantisk korrekt kode gør både jeres hjemmeside mere tilgængelig og nemmere at vedligeholde på sigt.
Nogle udviklere bruger <div> og <span> elementer til at bygge knapper, menuer og formularer, selvom der i stedet burde være brugt native HTML-elementer (som <button>, <nav>, <form>). Hvis knapper og andre komponenter er lavet med <div> i stedet for semantiske tags, kan de ikke forstås korrekt af skærmlæsere. Derudover kan det også betyde, at disse elementer kan blive helt usynlige eller ubrugelige for brugere, der ikke bruger mus.
Sørg derfor for, at jeres hjemmeside så vidt muligt anvender de indbyggede HTML-elementer til interaktive funktioner, fx <button>, <nav>, <form>, <label> osv. Hvis I får brug for specialkomponenter, skal I tilføje passende ARIA-attributter (f.eks. role="button", aria-label, aria-expanded) for at sikre korrekt tastaturnavigation.
Har I brug for hjælp til at gøre jeres hjemmeside mere tilgængelig?
Ved at sikre, at jeres hjemmeside overholder kravene fra WCAG, kan I skabe en bedre oplevelse for alle jeres brugere. Når I retter de typiske WCAG-fejl, som vi har beskrevet herover, og arbejder aktivt med hjemmesidens tilgængelighed, sender I et stærkt signal om, at jeres virksomhed tager ansvar og tænker inkluderende.
Har I brug for hjælp til at gøre jeres hjemmeside mere tilgængelig? Ring til os på 87 25 07 87 eller udfyld kontaktformularen, så tager vi en uforpligtende snak om, hvordan jeres hjemmeside kan leve op til kravene fra WCAG og skabe en bedre brugeroplevelse for alle.
