Spring til indhold
Artikler·Webudvikler·Tilgængelighed

Tilgængelighed i dybden — et web alle kan bruge

Semantik, tastatur, kontrast og skærmlæsere fra starten

Tilgængelighed handler om, at så mange som muligt kan bruge din side — også dem, der navigerer med tastatur, lytter med en skærmlæser, har nedsat syn eller svært ved fine museklik. Det er ikke en ekstra funktion, man skruer på til sidst; det er en måde at bygge på, og gjort fra starten koster det næsten ingenting ekstra.

§Fire bærende principper

De internationale retningslinjer for tilgængeligt web samler målene i fire ord. Indhold skal være opfatteligt (man skal kunne sanse det, fx via alternativ tekst og lyd-tekstning), anvendeligt (man skal kunne betjene det, fx med tastatur), forståeligt (sprog og opførsel skal give mening) og robust (det skal virke på tværs af browsere og hjælpemidler).

§Semantik er fundamentet

Det meste tilgængelighed kommer gratis, hvis HTML er semantisk. En knap, der er et rigtigt knap-element, kan betjenes med tastatur og annonceres korrekt af en skærmlæser uden videre. Overskrifter i logisk rækkefølge giver skærmlæserbrugere et indholdsoverblik. Brug elementerne efter deres betydning, før du griber til ekstra hjælpe-attributter — semantik først, lappeløsninger bagefter.

§Tastatur og fokus

Mange brugere bruger slet ikke en mus. Derfor skal alt kunne nås og betjenes med tastatur, i en logisk rækkefølge, og det element, der har fokus, skal være tydeligt markeret. Fjern aldrig fokus-markeringen uden at give en bedre i stedet — så efterlader man tastaturbrugeren i blinde om, hvor de er på siden.

  • 01Skriv semantisk HTML — rigtige knapper, links og overskrifter
  • 02Sørg for, at alt kan betjenes med tastatur alene
  • 03Gør fokus tydeligt synligt
  • 04Knyt en tydelig label til hvert formularfelt
  • 05Giv billeder meningsfuld alternativ tekst — eller markér dem som dekorative
  • 06Sørg for tilstrækkelig kontrast mellem tekst og baggrund

§Farve, kontrast og bevægelse

Brug ikke farve som eneste måde at formidle noget på — en fejl markeret kun med rød er usynlig for en farveblind bruger, men en tekstbesked ved siden af hjælper alle. Sørg for god kontrast mellem tekst og baggrund. Og respektér brugere, der har bedt om mindre bevægelse: kraftige animationer kan både genere og gøre nogle direkte utilpas.

§Test som brugerne gør

Prøv at lægge musen væk og navigere hele siden med tastaturet. Tænd en skærmlæser og lyt til, hvordan siden læses op. Brug et værktøj til at tjekke kontrast og struktur. Automatiske tjek fanger meget, men ikke alt — den bedste prøve er at bruge siden på samme vilkår som dem, du bygger den for.

Tilgængelighed gjort fra starten er nærmest gratis. Sat på til sidst er den dyr — og som regel halvhjertet.

Erfaringsregel fra frontendarbejde