Gratis værktøj: Tilgængelighed

Tilgængelighedstjek af din hjemmeside

Indtast din adresse, så tester vi den side og op til fire andre vigtige sider i en rigtig browser mod reglerne for WCAG 2.2 niveau A og AA. Til hver barriere får du elementet, siden, et skærmbillede og en forklaring på, hvem den rammer.

Gratis. Tester op til fem vigtige sider på cirka et minut.

Det tjekker værktøjet

  • Fem sider, der repræsenterer din hjemmeside

    Den side, du indtaster, plus op til fire sider, som vælges blandt dens links ud fra, hvilken slags hjemmeside det er. I en webshop betyder det en kollektion, et produkt, kurven og en indholdsside; på andre hjemmesider for eksempel priser, kontakt, en artikel eller ydelser. Skabeloner gentager sig, så én produktside viser som regel problemerne på dem alle.

  • WCAG-regler på den renderede side

    Hver side indlæses i Chromium ved 1366 × 900, og axe-core, Deques open source-regelmotor, kører sine regler for WCAG 2.0, 2.1 og 2.2 niveau A og AA, efter at sidens scripts har kørt. Det fanger problemer, som et tema eller en app først skaber, når siden bygges op i browseren.

  • Påvirkning og succeskriterier

    Hver regel, der fejler, viser sin påvirkning (kritisk, alvorlig, moderat eller mindre), de WCAG-succeskriterier, den hører til, og hvor mange elementer og sider den berører.

  • Det fejlende element, markeret

    HTML-koden for et eksempelelement og et skærmbillede af siden med elementet markeret, så du eller din udvikler kan finde det i skabelonen uden at gætte.

  • Punkter, som et menneske skal afgøre

    Når axe-core finder noget, den ikke kan afgøre, for eksempel tekst over et baggrundsbillede, hvis kontrast den ikke kan måle, vises punktet som skal gennemgås (needs review). Det tælles aldrig som en fejl.

  • En tastaturtest

    På den første side trykker vi 40 gange på Tab og registrerer, hvor fokus går hen: om det overhovedet flytter sig, om det sidder fast i en løkke (ofte i et cookiebanner), om det første stop er et spring-over-link (skip link), og hvilke fokuserede elementer der ikke viser nogen synlig fokusindikator. Den sidste kontrol er en heuristik, så den vises som skal gennemgås (needs review).

Det kan det ikke tjekke

  • Høre, hvad en skærmlæser læser op. Software kan bekræfte, at en knap har et navn, men ikke at navnet giver mening, når det bliver læst højt.
  • Vurdere undertekster, transskriptioner eller synstolkning til video og lyd.
  • Vurdere kognitive og indholdsmæssige kriterier, for eksempel om instruktioner er tydelige, eller om fejlmeddelelser hjælper folk med at rette fejlen.
  • Teste sider bag et login, en adgangskode eller bot-beskyttelse eller gennemføre et checkout-forløb.
  • Fortælle dig, om din hjemmeside lever op til WCAG eller overholder en lov. Automatiske regler finder en del af problemerne; resten kræver mennesker.

Hvorfor det er vigtigt

Tilgængelighedsbarrierer er ofte små fejl i skabeloner med store konsekvenser. En kurv-knap, der kun består af et ikon og mangler et tilgængeligt navn, bliver læst op som bare »knap«, så en skærmlæserbruger ikke kan vide, hvad den gør. Grå tekst på hvidt, der ikke når kontrastforholdet 4,5:1, er svær at læse for mange med nedsat syn og for alle, der bruger en telefon i skarpt sollys.

Fordi den samme header, det samme produktkort og den samme footer går igen på hver side, kan én rettelse i en skabelon fjerne hundredvis af fejl på én gang. Derfor er resultaterne grupperet efter regel med antal elementer og sider i stedet for at vise hver forekomst som et separat problem.

Tilgængelighed har også en juridisk side i mange lande. En scanning kan ikke fortælle dig, om en lov gælder for dig, eller om du overholder den. Det, den giver dig, er en dateret liste over reelle barrierer på dine egne sider, og det er under alle omstændigheder det praktiske sted at begynde.

Sådan læser du resultaterne

Kritisk
Barrieren kan forhindre nogle mennesker i overhovedet at bruge elementet, for eksempel et formularfelt uden label eller en knap uden navn. Ret disse først.
Alvorlig
Barrieren gør en opgave meget sværere for nogle mennesker, for eksempel brødtekst, der ikke opfylder kontrastforholdet.
Moderat
Barrieren skaber besvær eller forvirring, men folk kan som regel komme uden om den.
Mindre
Et lille problem eller en irritation. Stadig værd at rette, næste gang du redigerer den skabelon.
WCAG-succeskriterier
Numrene ved en regel, for eksempel 1.1.1 eller 1.4.3, er de kriterier, den tester. En regel uden et kriterium er god praksis (best practice) snarere end et WCAG-krav.
Elementer og sider
Hvor mange elementer der fejlede reglen, og på hvor mange af de testede sider. En regel, der fejler på alle sider, ligger som regel i en fælles del som headeren, menuen eller footeren.
Skal gennemgås
axe-core fandt noget, den ikke kunne afgøre. Se selv på elementet: det kan både bestå og fejle. Disse punkter tælles ikke som fejl.
Fokusfælde
Tab blev ved med at køre rundt mellem de samme få elementer. Hvis de hører til et cookiebanner, kan tastaturbrugere måske ikke nå resten af siden.
Fokus flytter sig ikke (Focus doesn’t move)
Et tryk på Tab satte aldrig fokus på noget. Links og knapper er måske bygget af div- eller span-elementer, eller et script opsnapper tasten.
Spring-over-link
Om det første Tab-stop er et »Gå til indhold«-link. Uden et sådant link skal tastaturbrugere tabbe sig gennem hele headeren på hver side. Landmarks og overskrifter kan også opfylde WCAG 2.4.1 Bypass Blocks.
Ingen synlig fokusindikator
Fokuserede elementer, hvor vi ikke så nogen outline, skygge (box shadow) eller understregning. En anden stil, for eksempel en farveændring, kan stadig være synlig, så tab selv gennem disse elementer for at bekræfte det.

Sådan retter du de mest almindelige problemer

  • Tekst, der ikke opfylder kontrastforholdet

    Normal tekst skal have mindst 4,5:1 mod baggrunden, og stor tekst (cirka 24 px eller cirka 18,7 px med fed skrift) skal have 3:1. Ret farven i temaets indstillinger eller i dine design tokens i stedet for element for element, og tjek derefter pladsholdertekst, hover-tilstande og tekst over billeder igen.

  • Billeder uden alt-tekst

    Giv hvert meningsfuldt billede en alt-attribut, der siger, hvad det viser eller gør, for eksempel produktnavnet og farven. Dekorative billeder får en tom alt (alt=""), så skærmlæsere springer dem over. I Shopify tilføjer du alt-tekst fra billedet i produktets mediesektion (Media); i WordPress i feltet Alternativ tekst i mediebiblioteket.

  • Formularfelter uden labels

    Knyt en label til hvert inputfelt med <label for>, der matcher feltets id, eller brug aria-label, når der ikke er nogen synlig tekst. Brug ikke pladsholdertekst som den eneste label: den forsvinder, så snart man begynder at skrive. Nyhedsbrevstilmeldinger og søgefelter i headeren er de typiske syndere.

  • Knapper og links uden et tilgængeligt navn

    Ikonknapper til kurv, søgning, menu eller sociale profiler indeholder ofte kun en SVG. Tilføj synlig tekst eller en aria-label, der siger, hvad knappen gør (»Åbn kurv«, ikke »ikon«), og tilføj aria-hidden="true" til selve SVG’en.

  • Et cookiebanner, der fanger fokus

    Sørg for, at alle knapper i banneret kan nås med Tab og bruges med Enter eller mellemrumstasten, at fokus vender tilbage til siden, når banneret lukkes, og at et banner, som ikke blokerer siden, slet ikke holder fast i fokus. Tjek indstillingerne i dit samtykkeværktøj, og opdater det, hvis scriptet er gammelt.

  • Fokusrammer fjernet i CSS

    Søg i dine stylesheets efter outline: none eller outline: 0 på links, knapper og :focus. Erstat det med en synlig stil, for eksempel :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Spørgsmål om værktøjet

Er dette tilgængelighedstjek gratis?

Ja. Du skal ikke oprette dig; du bekræfter blot, at du ejer eller administrerer hjemmesiden. Den betalte Tilgængelighedsrapport tilføjer op til 20 sider mere fra dit sitemap, et forløb kun med tastatur, et reflow-tjek ved 320 px, før-og-efter-kode bygget ud fra din fejlende markup, AI-prompts, en PDF og 5 gentests.

Hvor meget af WCAG kan et automatisk tjek teste?

Kun en del af det. En regel kan tjekke, at et billede har alt-tekst, men ikke at teksten beskriver billedet, og at et felt har en label, men ikke at labelen er tydelig. Brug resultaterne som en liste over sikre problemer, og test resten med tastatur og skærmlæser.

Hvis scanningen ikke finder noget, overholder min hjemmeside så ADA eller WCAG?

Nej. Ingen automatisk test kan vise, at en hjemmeside lever op til WCAG eller overholder ADA, den europæiske tilgængelighedslov (European Accessibility Act) eller nogen anden lov. Et rent resultat betyder, at de automatiske regler ikke fandt nogen fejl på de testede sider.

Kan jeg tjekke en staging-side eller sider bag et login?

Sider bag et login, en adgangskode eller bot-beskyttelse kan ikke testes. Hvis din bot-beskyttelse blokerer scanningen, så tillad user agenten FixReportsScanner, eller test en offentlig staging-kopi.

Jeg har rettet et problem. Hvorfor ser resultatet ens ud?

Resultater for den samme adresse kan blive genbrugt fra en scanning inden for den seneste time. Vent, til den time er gået, og ryd en eventuel sidecache eller CDN-cache, før du tester igen.

Kilder

Relaterede værktøjer

Tilgængelighedsrapport ($174, engangsbetaling) bygger videre på den fulde gratis scanning og tilføjer flere sider, ændringen til hvert fund, en PDF og gentests, så du kan bekræfte dine rettelser.

Om Tilgængelighedsrapport