Tilgængelighed på nettet: en praktisk guide
Tilgængelighed er forskellen mellem en side, alle kan bruge, og en der udelukker en del af de besøgende, uden at nogen bemærker det. De fleste krav er enkle og billige, hvis de håndteres under bygget.
Denne guide dækker, hvad du tjekker, hvordan du tester uden dyre værktøjer, og hvad der er lovkrav frem for god praksis.
Grundlaget, ordnet efter effekt#
At opfylde disse punkter fjerner størstedelen af de reelle barrierer, og ingen af dem er dyre under bygget.
- Semantisk HTML. Overskrifter, lister, knapper og links med de rette elementer — det er grundlaget for alt.
- Tastaturbetjening. Alt der kan gøres med mus, skal kunne gøres med Tab og Enter.
- Synlig fokusmarkering. Fjern aldrig omridset uden noget bedre i stedet.
- Tilstrækkelig kontrast. 4,5:1 for almindelig tekst, 3:1 for stor tekst.
- Alt-tekst på billeder. Beskrivende på informative, tom på dekorative.
- Etiketter på formularfelter. Knyttet til feltet, ikke bare pladsholdertekst.
- Tydelige fejl. Ved feltet, der siger hvad der skal rettes, ikke bare i rødt.
- Formidl ikke information alene med farve.
- Undertekster på video, og transskription på lyd.
Semantisk HTML løser i sig selv en enorm andel af problemerne. En knap, der er en <div>, fejler med det samme med tastatur og skærmlæsere.
At teste uden dyre værktøjer#
Fem tests, enhver kan lave, og som fanger størstedelen af problemerne.
| Test | Sådan gør du | Hvad det afslører |
|---|---|---|
| Kun tastatur | Læg musen væk og naviger med Tab | Fokusfælder, utilgængelige elementer |
| Zoom til 200 % | Forstør i browseren | Layout der knækker, afskåret tekst |
| Automatisk kontrol | Gratis tilgængelighedsudvidelse | Kontrast, etiketter, struktur |
| Skærmlæser | Den der allerede findes i styresystemet | Om siden giver mening oplæst |
| Gråtoner | Systemfilter | Information formidlet alene med farve |
Automatiske værktøjer fanger cirka en tredjedel af problemerne. Tastaturtesten fanger mange af resten og tager to minutter.
Almindelige fejl#
Mønstre der dukker op igen og igen, og som er lette at undgå.
- At fjerne fokusomridset af æstetiske grunde — gør siden ubrugelig med tastatur.
- At bruge <div> med klikhåndtering i stedet for <button>, hvilket mister tastatur og semantik.
- Pladsholdertekst i stedet for etiket: den forsvinder, når du begynder at skrive.
- Lav kontrast i sekundær tekst, meget almindeligt med lyse gråtoner.
- Billeder med indbrændt tekst, ulæselige for skærmlæsere og for oversættelse.
- Automatiske karruseller uden mulighed for at pause.
- Modaler der ikke returnerer fokus til det element, der åbnede dem.
- Ikoner uden tilgængelig etiket, især i menuer og lukkeknapper.
Lovkrav og omfang#
Rammerne varierer efter land og organisationstype, men retningen er den samme overalt.
| Kontekst | Status |
|---|---|
| Offentlig sektor i EU | Obligatorisk, med tilgængelighedserklæring |
| Digitale tjenester og handel | I stigende grad omfattet af EU-lovgivning |
| Leverandører til det offentlige | Ofte krævet i udbud |
| Referencestandard | WCAG 2.1 niveau AA |
| Private sider uden offentlige kontrakter | God praksis, med voksende juridisk risiko |
| Mobilapps | Omfattet af samme retningslinjer |
Uanset lovkrav er det praktiske argument enkelt: en betydelig del af befolkningen har en form for begrænsning, og midlertidige begrænsninger rammer alle på et tidspunkt.
Ofte stillede spørgsmål
Fordyrer tilgængelighed projektet?
Under bygget kun lidt — det meste handler om at skrive korrekt HTML og vælge farver med tilstrækkelig kontrast. At rette efter at siden er færdig koster betydeligt mere, fordi det betyder indgreb i allerede bygget struktur. Derfor bør det stå i kravene, ikke i en gennemgang bagefter.
Rækker automatiske værktøjer?
Nej. De fanger cirka en tredjedel af problemerne: kontrast, manglende etiketter, overskriftsstruktur. De kan ikke vurdere, om en alt-tekst er brugbar, om tabuleringsrækkefølgen giver mening, eller om siden er forståelig oplæst. Kombinér automatik med tastaturtest og skærmlæser.
Hjælper tilgængelighed på SEO?
Det hjælper, gennem reelt overlap: semantisk HTML, velbyggede overskrifter, alt-tekst og undertekstet video tjener begge formål. Det er ingen SEO-taktik, men de to trækker samme vej, fordi begge bygger på, at indholdet er forståeligt uafhængigt af den visuelle præsentation.
Har jeg brug for fuld overholdelse?
Er du lovmæssigt forpligtet — ja, på det krævede niveau. Ellers arbejd efter prioritet: ret først det, der blokerer brug — tastatur, kontrast, etiketter, formularer — og tag de finere punkter bagefter. En side med grundlaget på plads er brugbar; fuld formel overholdelse er næste skridt.
tilgængelighed hjemmesidewcagtilgængelig hjemmesidetastaturnavigationkontrast tilgængelighedskærmlæser
