Tilgængelighed og ADA for webshops

Gør din webshop tilgængelig for kunder med handicap, og overhold ADA. Lær WCAG 2.1 og gode metoder til tilgængelighed.

Kladde

Hver gang en kunde med et handicap ikke kan komme igennem din kasse, bruge et produktfilter eller læse dine produktbeskrivelser, har du mistet et salg. Mere end hver fjerde voksne i USA har en form for handicap. Det er ikke et lille markedssegment. Det er dit marked.

Tilgængelighed på nettet er ikke kun et etisk spørgsmål. Det er et juridisk krav. Americans with Disabilities Act (ADA) kræver, at virksomheder gør deres tjenester tilgængelige for mennesker med handicap. Det gælder også webshops. Tusindvis af hjemmesider får hvert år juridiske krav om brud på tilgængeligheden, og webshops bliver ramt oftest. Her gennemgår vi, hvad tilgængelighed betyder, hvorfor det er vigtigt for din webshop, hvad loven kræver, og hvordan du gør det uden dyre specialværktøjer.

Hvad er tilgængelighed på nettet?

Tilgængelighed på nettet betyder, at din hjemmeside kan bruges af alle, også mennesker med handicap. Det gælder blinde og svagsynede, døve og hørehæmmede, folk med motoriske handicap, der gør det svært at bruge en mus, folk med kognitive handicap eller indlæringsvanskeligheder og folk med andre tilstande, der påvirker, hvordan de bruger nettet.

Tilgængelige hjemmesider virker sammen med hjælpemidler som skærmlæsere (software, der læser tekst op), navigation kun med tastatur (for folk, der ikke kan bruge en mus) og forstørrelsesværktøjer. En tilgængelig hjemmeside bruger også et tydeligt sprog, tilstrækkelig farvekontrast, en rigtig overskriftsstruktur og feltmærker, som skærmlæsere kan forstå.

Hovedprincippet: dine kunder skal kunne gøre det, de kom for. De skal kunne bladre, filtrere, læse beskrivelser, lægge i kurven og gennemføre købet, uanset hvilke hjælpemidler eller tilpasninger de bruger.

Hvad er ADA, og hvorfor gælder den for din webshop?

Americans with Disabilities Act (ADA) blev vedtaget i 1990 og er en amerikansk føderal lov, der forbyder forskelsbehandling af mennesker med handicap. Afsnit III i ADA kræver, at alle virksomheder, der er åbne for offentligheden, giver mennesker med handicap lige adgang. Det gælder også hjemmesider og onlinetjenester. Loven giver ingen undtagelser for små virksomheder eller netbutikker.

Din webshop er et offentligt tilgængeligt sted efter ADA. Det betyder, at din hjemmeside skal være tilgængelig. Du kan ikke sige, at din webshop er for lille eller for ny, eller at tilgængelighed er for dyrt. Loven gælder. Domstolene har gentagne gange afgjort, at ADA gælder for hjemmesider, og det amerikanske justitsministerium har sagt, at tilgængelighed på nettet er et spørgsmål om borgerrettigheder og ikke valgfrit.

WCAG 2.1 niveau AA: standarden for tilgængelighed

Den standard for tilgængelighed på nettet, der bruges i retssager og krav om overholdelse, hedder WCAG (Web Content Accessibility Guidelines) 2.1 niveau AA. WCAG vedligeholdes af World Wide Web Consortium (W3C), en nonprofitorganisation, der fastsætter standarder for nettet.

WCAG 2.1 niveau AA har retningslinjer inden for fire hovedområder:

Mulig at opfatte: brugerne kan se eller høre dit indhold

Dit indhold skal vises på måder, kunderne kan opfatte. Det betyder alt-tekst til alle produktbilleder, undertekster til videoer, tilstrækkelig farvekontrast mellem tekst og knapper (mindst 4,5:1 for almindelig tekst) og intet indhold, der blinker mere end 3 gange i sekundet, fordi det kan give anfald.

Mulig at betjene: brugerne kan navigere i og bruge din webshop

Brugerne skal kunne navigere i din webshop kun med et tastatur (uden mus). Links og knapper skal kunne bruges med tastaturet. Formularer skal have tydelige feltmærker, som skærmlæsere kan forstå. Din webshop må ikke fange tastaturbrugere i uendelige løkker eller kræve handlinger inden for en tidsgrænse, som brugerne ikke kan justere. Menupunkter og formularfelter skal være nemme at finde og bruge.

Forståelig: brugerne kan forstå, hvad din webshop siger og gør

Din webshop skal være nem at forstå. Brug et tydeligt sprog og korte sætninger. Forklar fagudtryk første gang, du bruger dem. Opbyg siderne logisk med en rigtig overskriftsstruktur (én H1 pr. side, derefter H2 og H3 i rækkefølge). Forklar fejl i formularer tydeligt. Gør din hjemmeside ensartet, så brugerne kan forudsige, hvordan navigation og handlinger virker.

Robust: din webshop virker med hjælpemidler

Din kode skal være skrevet rigtigt, så skærmlæsere og andre hjælpemidler kan forstå den. Det betyder rigtig semantisk HTML (knapper er rigtige knapelementer og ikke div'er, der er stylet som knapper), en rigtig overskriftshierarki og ARIA-mærker, hvor der er brug for dem til at beskrive komplekse interaktive elementer. Din webshop skal virke på tværs af browsere og enheder.

Almindelige hindringer for tilgængelighed i webshops

Det er de hyppigste tilgængelighedsproblemer i webshops:

Manglende eller dårlig alt-tekst til produktbilleder

Mange webshops har ingen alt-tekst til produktbilleder eller en uklar alt-tekst som "billede" eller "produktfoto". Brugere af skærmlæsere kan ikke se billeder. Alt-teksten skal beskrive det vigtige ved billedet. Til en rød t-shirt er en god alt-tekst "rød t-shirt i bomuld med rund hals og brystlomme" og ikke "trøje" eller "rød trøje foto". Til en variantvælger kan alt-teksten beskrive farveprøven eller stilen tydeligt. Hvert produktbillede har brug for en præcis, beskrivende alt-tekst.

Formularer uden ordentlige feltmærker

Når et formularfelt (e-mail, telefon, adresse) ikke har et tilknyttet feltmærke, eller mærket kun er en visuel pladsholdertekst, ved brugere af skærmlæsere ikke, hvad de skal skrive. Formularer med rigtige feltmærker har usynlige, men tilgængelige mærkeelementer, der fortæller skærmlæsere, hvad hvert felt er til.

Ingen navigation med tastatur

Nogle hjemmesider kræver en mus for at navigere eller gennemføre et køb. Brugere, der kun bruger tastatur, kan ikke bruge rullemenuer, kan ikke se, hvilket element der er valgt, eller kan ikke tabulere gennem formularfelter i en logisk rækkefølge. Alle funktioner skal kunne bruges med tastatur. Tastaturets fokus skal være synligt på siden, så brugerne ved, hvor de er.

Dårlig farvekontrast

Lysegrå tekst på hvid baggrund er måske til at læse for dig. Den kan ikke læses af folk med nedsat syn. WCAG niveau AA kræver et kontrastforhold på mindst 4,5:1 for almindelig tekst. Knapper, links og al tekst, brugerne skal læse, skal opfylde den standard. Tjek din kontrast med et gratis værktøj til at tjekke kontrast.

Forvirrende overskriftsstruktur

Brugere af skærmlæsere navigerer ofte på siden ved at hoppe mellem overskrifter. Hvis din side springer fra H1 til H3 til H2 eller bruger overskrifter kun til styling, giver skærmlæsere en forvirrende oplevelse. Brug overskrifter i logisk rækkefølge til at opbygge din side. Én H1 pr. side, derefter H2 til de store afsnit og H3 til underafsnit. Spring aldrig overskriftsniveauer over.

Knapper og links uden tydeligt formål

En knap, der siger "klik her", fortæller ikke brugere af skærmlæsere, hvad der sker, når de klikker. Brug beskrivende knaptekst: "Læg i kurv", "Se anmeldelser", "Gå til kassen". Hvis du har brug for en knap med et ikon, så tilføj tekst eller et ARIA-mærke, der beskriver handlingen. Hvert interaktivt element skal have et tydeligt, beskrivende mærke.

Rullemenuer og filtre, der ikke er tilgængelige

Produktfiltre, kategorimenuer og sortering, der kun virker med mus, er almindelige hindringer. Tastaturbrugere skal kunne bruge dem på samme måde. Komplekse interaktive komponenter har brug for ARIA-roller og understøttelse af tastatur for at virke sammen med hjælpemidler.

Sådan gør du din webshop tilgængelig

Tilgængelighed kræver ikke, at du hyrer en dyr konsulent eller køber specialsoftware. Start med det grundlæggende:

1. Skriv alt-tekst til alle produktbilleder

Det er den ændring, der betyder mest. Gå dine produkter igennem, og skriv en beskrivende alt-tekst til hvert billede. Beskriv produktet, farven, materialet, stand og særlige kendetegn. Test din alt-tekst ved at læse den højt. Forstår en, der ikke kan se billedet, produktet? Hvis ikke, så forbedr den.

2. Sørg for, at alle formularer har rigtige feltmærker

Hvert formularfelt skal have et mærkeelement knyttet til sig i din kode. Stol ikke på pladsholdertekst. Fjern pladsholderteksten, når feltet er i fokus, eller behold den, men tilføj et rigtigt mærke. Grupper afkrydsningsfelter og radioknapper, og mærk dem tydeligt. Fejlmeddelelser i formularer skal være konkrete og fortælle brugerne præcis, hvad de skal rette.

3. Sørg for, at navigation med tastatur virker

Test hele din webshop kun med tastaturet. Tryk på Tab for at navigere. Kan du nå hver knap, hvert link og hver formular? Kan du se, hvor fokus er? Er tabulatorrækkefølgen logisk (fra venstre mod højre, oppefra og ned)? Hvis tastaturbrugere sidder fast eller ikke kan nå noget, så ret det. De fleste hindringer for tilgængelighed er hindringer for tastaturet.

4. Tjek og forbedr farvekontrasten

Brug et gratis værktøj til at tjekke kontrast på din produktside, dine knapper, links og feltmærker. Sørg for, at tekst opfylder 4,5:1 i kontrast for almindelig tekst og 3:1 for stor tekst (18 punkt eller større). Stol ikke kun på farve til at give information (for eksempel "røde varer er på tilbud"). Tilføj tekstmærker eller ikoner, der støtter budskabet.

5. Ret din overskriftsstruktur

Gennemgå din sidestruktur. Du skal have én H1 (sidens hovedtitel), derefter H2 til de store afsnit og H3 til underafsnit. Spring aldrig overskriftsniveauer over. Brug overskrifter til at strukturere indholdet logisk og ikke til styling. Hvis du har brug for stylet tekst, der ikke er en rigtig overskrift, så brug en div og CSS og ikke et overskriftsmærke.

6. Skriv tydelig tekst til links og knapper

Brugere af skærmlæsere henter ofte en liste over alle links på en side. Links skal give mening uden sammenhæng. "Læs mere om leveringsmuligheder" er bedre end "læs mere". "Se anmeldelser af produktet" er bedre end "læs anmeldelser". Knapper skal tydeligt beskrive deres handling: "Læg i kurv", "Gå til kassen", "Gem til senere".

7. Test med hjælpemidler

Download en gratis skærmlæser, for eksempel en gratis til Windows, eller brug de indbyggede tilgængelighedsværktøjer på Mac og iPhone. Lyt til, hvordan din hjemmeside lyder. Kan du gennemføre et køb kun med tastatur og skærmlæser? Det er den rigtige prøve på tilgængelighed. Mange hindringer bliver tydelige, når du prøver at bruge din egen webshop som blind eller som bruger, der kun bruger tastatur.

Test og gennemgang af tilgængelighed

Når du har lavet ændringer, så test din webshop for tilgængelighed. Start med de her værktøjer:

Automatiske testværktøjer

Gratis værktøjer som Lighthouse (indbygget i Chrome) og andre gratis tilgængelighedstjek scanner dine sider og markerer almindelige fejl som manglende alt-tekst, lav kontrast og dårlig overskriftsstruktur. Værktøjerne fanger måske 30 % af tilgængelighedsproblemerne, så de er et udgangspunkt og ikke hele svaret. Brug dem til en hurtig scanning, men gå ikke ud fra, at en grøn rapport betyder, at din hjemmeside er fuldt tilgængelig.

Test med tastatur

Naviger på din hjemmeside kun med Tab, Shift+Tab, Enter og piletasterne. Ingen mus. Det er den vigtigste test. Kan du gennemføre alle opgaver? Sidder du fast? Er fokus synligt? Giver tabulatorrækkefølgen mening? Hvis navigation med tastatur er i stykker, består din webshop ikke standarden for tilgængelighed, uanset hvad de automatiske værktøjer siger.

Test med skærmlæser

Lyt til din hjemmeside med en skærmlæser, for eksempel en gratis til Windows eller den indbyggede på Mac. Beskriver skærmlæseren produktbillederne tydeligt? Kan du forstå feltmærkerne? Giver navigationen mening? Er der knapper eller links uden forklaring? Professionelle gennemgange af tilgængelighed lader ofte blinde testere bruge din hjemmeside, men du kan finde de store problemer ved selv at lave en simpel test med skærmlæser.

Gennemgang af koden

Tjek din HTML-kode for rigtig semantisk markering. Knapper skal være knapelementer og ikke stylede div'er. Links skal være anker-tags. Formularfelter skal have mærkeelementer. Overskrifter skal være h1-, h2- og h3-tags i rækkefølge og ikke h1, h3, h2. God semantisk HTML er fundamentet for tilgængelighed.

Sådan hjælper WEMASY med tilgængelighed

WEMASYs hjemmesidebygger er bygget med tilgængelighed i tankerne. Platformen har semantisk HTML-struktur, rigtig håndtering af formularer med tilgængelige feltmærker, menuer og kurvfunktioner, der kan bruges med tastatur, og værktøjer til nemt at tilføje alt-tekst til billeder. Når du bygger din webshop med WEMASY, er den underliggende HTML allerede opbygget til tilgængelighed. Du arver ikke utilgængelig kode fra platformen.

Det betyder ikke, at din hjemmeside automatisk er fuldt tilgængelig. Du skal stadig skrive god alt-tekst, bruge et tydeligt sprog og teste med rigtige brugere. Men WEMASYs fundament fjerner mange almindelige hindringer, som plager andre e-handelsplatforme. Se, hvad der er med i hver plan, på vores prisside.

Forretningsmæssige grunde til tilgængelighed

Ud over at overholde loven er tilgængelighed god forretning. Tilgængelige hjemmesider er nemmere at bruge for alle og ikke kun for mennesker med handicap. Tydeligt sprog, god kontrast, logisk struktur og navigation med tastatur gavner ældre brugere, brugere på mobilen, brugere i støjende omgivelser og brugere med langsomt internet. En hjemmeside, der er tilgængelig for mennesker med handicap, er en bedre hjemmeside for alle brugere.

Mere direkte: 1 ud af 4 voksne i USA har et handicap. Det er omkring 65 millioner mennesker. Hvis din webshop ikke er tilgængelig, udelukker du et enormt marked. Du lader også penge ligge. Blinde og svagsynede kunder bruger milliarder online. De vil gerne købe i din webshop. Gør det muligt.

Juridisk er risikoen reel. Over 5.000 sager om tilgængelighed på hjemmesider blev anlagt i 2025. Webshops stod for 70 % af sagerne. Et krav om brud på tilgængeligheden koster tid og advokatomkostninger at forsvare sig mod. At indgå forlig uden at rette de underliggende problemer inviterer bare til flere krav. Den smarteste måde er at rette din hjemmeside nu, dokumentere din indsats og undgå problemet helt.

Kom i gang

Hvis din webshop ikke er tilgængelig, skal du ikke gå i panik. Start med de rettelser, der betyder mest: alt-tekst, navigation med tastatur og kontrast. De tre ændringer fanger de fleste hindringer. Test med tastaturnavigation og en skærmlæser. Ret de problemer, du finder. Dokumenter dit arbejde. Test igen jævnligt, især efter ændringer af din hjemmeside. Tilgængelighed er ikke et engangsprojekt. Det er en løbende praksis i at bygge for alle.

Ofte stillede spørgsmål

Er min lille webshop virkelig omfattet af ADA?

Ja. ADA gælder for alle virksomheder, der er åbne for offentligheden, uanset størrelse. Der er ingen undtagelse for små virksomheder. Hvis du sælger online, er din hjemmeside omfattet.

Hvad er forskellen på tilgængelig og compliant?

Tilgængelig betyder, at din hjemmeside rent faktisk kan bruges af mennesker med handicap. Compliant betyder, at den opfylder en teknisk standard som WCAG 2.1 niveau AA. En hjemmeside kan teknisk set opfylde standarden og stadig være svær at bruge, eller den kan være meget brugbar uden at være teknisk perfekt. Målet er begge dele: tilgængelig i praksis og i overensstemmelse med standarden.

Skal jeg hyre nogen til at gøre min webshop tilgængelig?

Ikke nødvendigvis. Hvis din webshop har grundlæggende problemer (manglende alt-tekst, dårlig kontrast, navigation med tastatur, der ikke virker), kan du selv rette mange af dem. Skriv alt-tekst, tjek kontrasten med et gratis værktøj, og test med dit tastatur og en skærmlæser. Hvis din hjemmeside er bygget på en moderne platform med rigtig HTML-struktur, er det ofte ligetil at rette tilgængeligheden. Større hjemmesider med komplekse funktioner kan have gavn af en professionel gennemgang, men små webshops kan ofte selv rette de største hindringer.

Hvad hvis jeg får et krav om tilgængelighed?

Tag det alvorligt. Ignorer det ikke. Krav giver typisk en frist til at rette problemerne. Arbejd sammen med din udvikler eller platformens support om at rette de konkrete overtrædelser, der nævnes. Dokumenter alt, hvad du gør. Du kan også tale med en advokat, der kender reglerne om tilgængelighed. At indgå forlig uden at rette de underliggende problemer er ikke en løsning på lang sigt. Ret hjemmesiden.

Gør det min hjemmeside langsommere, når jeg gør den tilgængelig?

Nej. Tilgængelighed og hastighed er to forskellige ting. En hjemmeside kan være hurtig og utilgængelig, eller langsom og tilgængelig. Semantisk HTML (den kodestruktur, der skal til for tilgængelighed) er ofte lettere og hurtigere end dårligt skrevet kode. Mange forbedringer af tilgængelighed, som en rigtig overskriftsstruktur og et tydeligt sprog, har ingen betydning for hastigheden.

Dækker WCAG 2.1 niveau AA alt, hvad jeg skal bruge for at overholde loven?

WCAG 2.1 niveau AA er den standard, der bruges i de fleste retssager om tilgængelighed. Det er det mål, domstolene har brugt til at vurdere, om en hjemmeside er tilgængelig. At overholde WCAG 2.1 niveau AA er den bedste måde at vise, at du tog tilgængelighed alvorligt og opfyldte den juridiske standard.

Læs også: Privatlivspolitik, cookiesamtykke og GDPR til din webshop og Sådan beskytter du dit brand og dine produkter mod kopiering.

Brug det med det samme
på din egen hjemmeside.

Start gratis med WEMASY, og byg din side på få minutter.