Webtilgængelighed: Guide til de tekniske standarder

Webtilgængelighed er afgørende, hvis du vil sikre, at informationen og de digitale tjenester på din hjemmeside er lige så tilgængelige for personer med handicap som for alle andre. Ligesom bygninger bør have ramper og tydelig skiltning, så alle kan komme ind, bør en hjemmeside bygges, så alle kan bruge den, uanset individuelle forudsætninger.

I denne artikel gennemgår vi de tekniske grundprincipper bag EU’s Tilgængelighedsdirektiv. Vi viser dig også, hvordan du kan gøre din hjemmeside mere inkluderende, skabe digital lighed og samtidig nå ud til en bredere målgruppe.

Hvad er en tilgængelig hjemmeside?

En tilgængelig hjemmeside er designet, så alle kan bruge den, uanset fysiske eller kognitive evner. Det betyder, at den kan anvendes af personer med nedsat syn, hørelse, motorik eller andre funktionsnedsættelser.

En inkluderende hjemmeside skal være:

Brugervenlig: Hjemmesiden skal være nem og intuitiv at navigere på uden tekniske eller designmæssige barrierer.

Tilgængelig: Indhold og funktioner skal kunne bruges af alle, også dem, der benytter hjælpemidler som skærmlæsere og særlige inputenheder.

De tekniske standarder for webtilgængelighed

Lad os se nærmere på de vigtigste elementer, du kan optimere, for at gøre din hjemmeside mere tilgængelig for alle brugere

Semantisk HTML

Semantisk HTML betyder, at du bruger de rigtige HTML-tags til dit indhold. Det gør siden lettere at forstå, både for mennesker og for hjælpemidler som skærmlæsere. For eksempel bør overskrifter markeres med <h1>, <h2> osv. for at skabe en tydelig struktur. Det hjælper både brugere og søgemaskiner med at forstå indholdet

Lister

Lister (<ul>, <ol>) gør det let at præsentere punkter på en overskuelig måde. Hvis de ikke er korrekt struktureret, kan det skabe forvirring, især for brugere med skærmlæsere.

Links bør altid have en beskrivende linktekst, der fortæller, hvor linket fører hen, i stedet for en tekst som “klik her”, der ikke giver brugeren eller søgemaskinen information om, hvad du linker til. En god linktekst forbedrer både brugeroplevelsen og webtilgængeligheden.

Brug af ARIA 

WAI-ARIA er en samling attributter, der kan tilføjes HTML-elementer for at gøre dynamisk indhold mere tilgængeligt.

Eksempler:

• aria-label giver en tydelig beskrivelse af interaktive elementer som CTA-knapper og links.
• aria-live gør det muligt for skærmlæsere at registrere ændringer på siden fx ved fejlmeldinger eller formularopdateringer.
• aria-role definerer funktionen af et element. For eksempel kan en <div> få rollen role=”button”, så hjælpemidler forstår, at den fungerer som en knap. 

Korrekt brug af formularer

Formularer er afgørende på mange hjemmesider, men de er også ofte en barriere. For at gøre dem tilgængelige bør hvert felt have en tydelig label.

Forbindelsen skabes ved at matche <label>-taggets for-attribut med input-feltets id. Det gør det nemt for både tastaturbrugere og skærmlæsere at navigere og forstå formularen.

Fejlmeddelelser er også vigtige: De bør være klare, præcise og forklare, hvad der skal rettes. Og de skal vises i en logisk rækkefølge, så de er enkle at følge, også for brugere, der ikke kan se skærmen.

Gør medieindholdet på din hjemmeside tilgængeligt

Medieindhold, især indlejrede videoer og lydfiler, skal også gøres tilgængeligt for alle.

• Videoer: Sørg altid for undertekster, så brugere med nedsat hørelse kan følge med.
• Lydindhold: Tilføj transskriptioner, så det talte indhold også kan læses.
• Visuelt indhold: Hvis videoer eller billeder formidler vigtig information, bør du tilføje lydbeskrivelser. Her kan en video fx indeholde en forklaring af, hvad der sker i baggrunden eller hvilken visuel information, der vises på skærmen. 

Responsivt design og webtilgængelighed

En responsive hjemmeside tilpasser sig automatisk til forskellige skærmstørrelser, uanset om brugeren besøger din side fra en computer, tablet eller smartphone. Det gør ikke bare hjemmesiden mere visuelt appellerende, det er også essentielt for god webtilgængelighed.

Med one.coms Hjemmesideprogram kan du hurtigt og nemt oprette en mobilvenlig hjemmeside, helt uden at kode.

Mobilvenligt design uden barrierer

Alt indhold og alle funktionerne på din hjemmeside skal være tilgængelige for mobilbrugere:

• Dynamisk indhold: Tekst og layout skal kunne tilpasses forskellige skærmstørrelser og brugerindstillinger. Hvis en bruger fx øger tekststørrelsen, skal indholdet automatisk tilpasse sig uden at designet kommer til at se mærkeligt ud.
• Touchvenlige elementer: Knapper og links skal være store nok og have passende afstand, så de er nemme at trykke på. Det er særligt vigtigt for brugere med motoriske udfordringer.
• Navigation: Dit menu-design skal fungere lige så godt på mobil som på desktop.
• Skærmlæsere og tastaturnavigation: Interaktive elementer skal være tilgængelige for alle, også dem, der ikke bruger mus.

Skalering og tilpasning af indhold

Responsivt design handler også om, at indholdet skal kunne skaleres.

• Formularer og menuer: Sørg for, at disse også fungerer på små skærme. Her er hamburger-menuer og drop down-menuer særligt effektive, fordi de ikke fylder hele skærmen.
• Fleksible layouts: Brug procentbaserede bredder i stedet for faste pixelmål, så indholdet tilpasses på en naturlig måde til forskellige skærmstørrelser.
• Billeder: Optimer billedstørrelser, så de indlæses hurtigt på mobil, uden at det går ud over kvaliteten. Du kan komprimere billeder med værktøjer som Imagify.
• Alt-tekster: Beskrivende alt-tekster skal være tilgængelige på mobil, så brugere med nedsat syn kan forstå indholdet via skærmlæsere.

Farver og kontraster 

Farverne på din hjemmeside spiller også en afgørende rolle for webtilgængelighed.  De påvirker om indholdet er nemt at se og læse for alle brugere.

WCAG-standarder: Ifølge WCAG-retningslinjerne skal kontrastforholdet mellem tekst og baggrund være mindst 4.5:1 for almindelig tekst. For store tekstområder eller overskrifter (skriftstørrelser på 18 pt eller 14 pt fed) gælder et minimum på 3:1.

Kontrast: Der skal være tydelig kontrast mellem tekst og baggrund, så indholdet er let at læse, også for personer med nedsat syn eller farveblindhed.

Læsbarhed: Høj kontrast gør det nemt at læse teksten hurtigt, både i svagt lys og på mobile enheder.

Værktøjer til kontrol af farvekontraster

Hvis du vil sikre, at din hjemmeside lever op til de anbefalede kontrastkrav, kan du bruge gratis værktøjer, der måler kontrasten mellem tekst og baggrund. Nogle af de mest populære er:

• WebAIM’s Contrast Checker: Giver dig hurtigt et overblik over, om dine farver opfylder WCAG-standarderne.
• TPGi’s Contrast Checker: Tester om dine farvekombinationer sikrer god webtilgængelighed.
• Colour Contrast Analyser: Giver dig en detaljeret analyse af kontrasten mellem tekst og baggrundsfarver.

Tag højde for farveblindhed

Ifølge VisionCenter lever millioner af mennesker med farveblindhed. Den mest almindelige form er rød-grøn farveblindhed, som gør det svært at skelne mellem netop de to farver. Derfor er det vigtigt at vælge farvekombinationer, som alle brugere kan se tydeligt.

Her er nogle praktiske tips:

1. Brug ikke farver til at tydeliggøre noget: En knap eller en advarsel, der kun adskiller sig ved farve, kan være usynlig for farveblinde brugere. Kombinér farver med tekst, ikoner eller understregning, så betydningen bliver tydelig.
2. Vælg kontrastfyldte farvekombinationer: Undgå rød-grønne kombinationer. Vælg i stedet blå-gule eller blå-orange, som skaber bedre kontraster.
3. Test med værktøjer: Med værktøjer som Color Oracle kan du simulere farveblindhed og se, hvordan din hjemmeside opleves af brugere med forskellige typer farvesyn.
4. Undgå spraglede baggrunde: Mange farver og mønstre kan gøre teksten svær at læse. Hold dig til enkle baggrunde, der ikke forstyrrer indholdet.

Tastaturtilgængelighed

En anden vigtig del af webtilgængelighed er tastaturtilgængelighed. Det betyder, at brugere kan navigere på hjemmesiden uden mus. Det er afgørende for personer med motoriske udfordringer eller for personer med nedsat syn, der bruger skærmlæsere.

Ikke alle bruger mus

Mange foretrækker eller er nødt til at bruge tastaturet som inputmetode. Derfor skal alle interaktive elementer som links, knapper og formularer, være tilgængelige via tastatur.

• Hele hjemmesiden skal kunne navigeres med Tab-tasten.
• Elementerne skal være placeret i en logisk rækkefølge, så brugeren ledes gennem indholdet på en intuitiv måde.
• Der skal være visuelle fokusindikatorer, så man tydeligt kan se, hvilket element der er aktivt.

Dette er også vigtigt for skærmlæsere, som så har nemmere ved at fortolke indholdet og navigere rundt på siden. 

Fokusstyret og tabuleret navigation

Fokusstyring handler om, hvordan fokus bevæger sig mellem elementer på siden. Når brugeren trykker på Tab, skal fokus lande det korrekte sted og lede brugeren videre til næste logiske trin.

Tabuleret navigation bruges ofte i tabeller og formularer. Med Hjemmesideprogrammet fra one.com kan du nemt sikre, at tabulatorrækkefølgen er logisk og velstruktureret, så brugeren kan hoppe mellem felter, rækker og kolonner uden at miste overblikket.

Undgå forhindringer for tastaturbrugere

Pop-ups, modalvinduer og dropdown-menuer kan let blokere navigationen for tastaturbrugere. Derfor er det vigtigt at:

• Alle interaktive elementer er fuldt tilgængelige via tastaturet.. 
• Fokus flyttes direkte til pop-uppen, når den åbnes.
• Fokus bliver i dialogboksen, indtil brugeren lukker den, fx med Escape-tasten.

Håndtering og forebyggelse af fejl

God håndtering af fejl er afgørende for en brugervenlig og tilgængelig hjemmeside. Fejl kan hurtigt skabe frustration, især i formularer eller interaktive funktioner.

Klare fejlmeddelelser og optimal placering

• Fejlmeddelelser skal være tydelige, korte og synlige.
• De skal fortælle præcist, hvad problemet er og hvordan det kan løses. Eksempel: “E-mailadresse mangler” er meget bedre end blot “Inputfejl“.
• Placer fejlmeddelelserne tæt på det felt, der skal rettes. Det gør det nemt for brugeren at forstå og rette fejlen.
• Meddelelsen skal fortælle brugeren, hvad de skal gøre. I stedet for “Fejl” eller “Ugyldig indtastning” kan du bruge “Indtast en gyldig e-mailadresse“

Validering af formularer i realtid

Validering i realtid hjælper brugeren med at undgå fejl, før de indsender en formular. Når brugeren skriver, skal de med det samme kunne se om en indtastning er korrekt, eller om den skal rettes.

Et tekstfelt til indtastning af e-mailadresse kan fx automatisk tjekke om adressen har det rette format, og vise en fejlmeddelelse, hvis den ikke er gyldig.

Fejlmeddelelser skal være forståelige for alle. Lydfeedback til brugere af skærmlæsere og visuelle markeringer for de resterende brugere sikrer, at valideringen er fuldt tilgængelig.  

Fejlhåndtering for skærmlæsere og tastaturbrugere

Skærmlæsere læser indholdet på siden højt, og derfor skal fejlmeddelelser være tydelige og strukturerede. Implementer dem som ARIA live regions, så de bliver læst højt med det samme, uden at brugeren skal klikke i feltet.

For dem, der navigerer med tastatur, er det vigtigt, at fejl hurtigt kan findes og rettes. Fokus bør automatisk flytte sig til det felt, der er en fejl i, og ved indsendelse skal tab-funktionen springe til den første fejl. På den måde kan problemer løses hurtigt og uden forvirring. Undgå også forhindringer: brugeren skal ikke først være nødt til at lukke en pop-up eller trykke på en knap, før de kan rette en fejl.

Test webtilgængeligheden løbende

Webtilgængelighed er ikke noget, man bare tjekker én gang. Det kræver løbende tjek, hvis du vil være sikker på, at alle kan bruge din hjemmeside.

Værktøjer, der tester webtilgængelighed

Der findes mange gode værktøjer, der kan hjælpe dig med at tjekke webtilgængeligheden på din hjemmeside. Skærmlæsere er blandt de vigtigste, fordi de viser, hvordan indholdet opleves af blinde eller svagtseende.

Populære skærmlæsere er NVDA, JAWS, og VoiceOver (til Mac og iPhone). De giver dig en klar idé om, hvordan navigation og indhold bliver forstået. 

Manuel test og feedback fra brugere

Automatiske værktøjer kan fange meget, men ikke alt. Derfor bør du også teste manuelt. Prøv at navigere med tastatur, tjek fejlmeddelelser og afprøv interaktive elementer som formularer og knapper.

Den bedste test er med rigtige mennesker. Brugere med forskellige handicap, fx nedsat syn eller motoriske udfordringer, kan give værdifuld feedback om, hvor siden fungerer, og hvor de stadig støder på forhindringer. De vil opdage ting, som automatiske tests ikke kan afsløre. Her kan det være nyttigt at gøre det nemt for besøgende at give tilbagemeldinger, så nye forhindringer ikke pludselig dukker op

Gode ressourcer

Der er masser af hjælp at hente online, når du arbejder med webtilgængelighed:

Værktøjer: 

• Axe: Et populært værktøj, der finder fejl og foreslår løsninger.
• Google Lighthouse: Tjekker webtilgængelighed, performance og SEO, og giver dig detaljerede rapporter.
• WAVE: Analyserer webtilgængelighed og viser fejl direkte på siden.

Guides og dokumentation:

• WCAG-retningslinjerne: De vigtigste principper og teknikker for tilgængeligt design.
• MDN Web Docs: Tutorials og ressourcer om HTML, CSS, ARIA m.m.
• WebAIM: Guides og værktøjer til webtilgængelighed.

Communities:

• A11Y Project: Community med eksperter, udviklere og designere, der deler viden og tips.
• Stack Overflow: Søg på “accessibility” og få svar fra udviklere.
• På den sociale platform X bruges hashtagget #a11y til at dele ressourcer og viden om webtilgængelighed.
   

Gør din hjemmeside tilgængelig for alle

Webtilgængelighed handler om at skabe en hjemmeside, alle kan bruge. Med de rette værktøjer, en logisk struktur og regelmæssige tjek kan du sikre en god oplevelse for alle besøgende. Gør du det, overholder du ikke blot loven, du skaber også en inkluderende brugeroplevelse og når en bredere målgruppe.