Gratis verktøy: Universell utforming

Test universell utforming på nettstedet ditt

Skriv inn adressen din, så tester vi den siden og opptil fire viktige sider i en ekte nettleser mot reglene i WCAG 2.2 nivå A og AA. Hver barriere vises med elementet, siden, et skjermbilde og en forklaring på hvem den rammer.

Gratis. Tester opptil fem viktige sider på omtrent ett minutt.

Hva verktøyet sjekker

  • Fem sider som representerer nettstedet ditt

    Siden du skriver inn, pluss opptil fire sider som velges blant lenkene på den ut fra hva slags nettsted det er. I en nettbutikk betyr det en kolleksjon, et produkt, handlekurven og en innholdsside; ellers sider som priser, kontakt, en artikkel eller tjenester. Maler gjentas, så én produktside viser som regel problemene på alle produktsidene.

  • WCAG-regler på den gjengitte siden

    Hver side lastes i Chromium i 1366 × 900, og axe-core, Deques regelmotor med åpen kildekode, kjører reglene sine for WCAG 2.0, 2.1 og 2.2 nivå A og AA etter at sidens skript har kjørt. Da fanges også problemer som et tema eller en app først skaper når siden bygges opp i nettleseren.

  • Alvorlighetsgrad og suksesskriterier

    Hver regel som feiler, viser alvorlighetsgraden (kritisk, alvorlig, moderat eller mindre), hvilke WCAG-suksesskriterier den er knyttet til, og hvor mange elementer og sider den gjelder.

  • Det feilende elementet, markert

    HTML-koden til et eksempelelement og et skjermbilde av siden der elementet er rammet inn, så du eller utvikleren din finner det i malen uten å måtte gjette.

  • Punkter et menneske må avgjøre

    Når axe-core finner noe det ikke kan avgjøre, for eksempel tekst over et bakgrunnsbilde der kontrasten ikke kan måles, oppføres punktet som «Må vurderes». Det telles aldri som en feil.

  • En tastaturtest

    På den første siden trykker vi Tab 40 ganger og registrerer hvor fokuset går: om det flytter seg i det hele tatt, om det blir sittende fast i en løkke (ofte i et cookie-banner), om det første stoppet er en hopplenke, og hvilke fokuserte elementer som ikke viser noen synlig fokusmarkering. Den siste kontrollen er en heuristikk, så den vises som «Må vurderes».

Hva det ikke kan sjekke

  • Høre hva en skjermleser leser opp. Programvare kan bekrefte at en knapp har et navn, men ikke at navnet gir mening når det leses høyt.
  • Vurdere teksting, transkripsjoner eller synstolking for video og lyd.
  • Vurdere kognitive og innholdsmessige kriterier, for eksempel om instruksjoner er tydelige eller om feilmeldinger hjelper folk med å rette opp feil.
  • Teste sider bak innlogging, passord eller bot-beskyttelse, eller gå gjennom en kasse.
  • Si deg om nettstedet ditt er i samsvar med WCAG eller oppfyller noen lov. Automatiske regler finner en del av problemene; resten krever mennesker.

Hvorfor det er viktig

Barrierer for universell utforming er ofte små feil i maler med store konsekvenser. En handlekurvknapp som bare er et ikon og mangler tilgjengelig navn, leses opp som bare «knapp», så en skjermleserbruker kan ikke vite hva den gjør. Grå tekst på hvitt som ikke når kontrastforholdet 4,5:1, er vanskelig å lese for mange med nedsatt syn, og for alle som bruker mobilen i sterkt sollys.

Fordi det samme toppfeltet, de samme produktkortene og det samme bunnfeltet går igjen på hver side, kan én rettelse i en mal fjerne hundrevis av feil på én gang. Derfor grupperes resultatene etter regel, med antall elementer og sider, i stedet for at hver forekomst listes som et eget problem.

Universell utforming har også en juridisk side i mange land. En skanning kan ikke si deg om en lov gjelder for deg, eller om du oppfyller den. Det den gir deg, er en datert liste over reelle barrierer på dine egne sider, og det er uansett det praktiske stedet å begynne.

Slik leser du resultatene

Kritisk
Barrieren kan hindre noen helt i å bruke elementet, for eksempel et skjemafelt uten ledetekst eller en knapp uten navn. Rett disse først.
Alvorlig
Barrieren gjør en oppgave mye vanskeligere for noen, for eksempel brødtekst som ikke oppfyller kravet til kontrastforhold.
Moderat
Barrieren skaper vansker eller forvirring, men folk kan som regel komme seg rundt den.
Mindre
Et lite problem eller irritasjonsmoment. Likevel verdt å rette neste gang du redigerer den malen.
WCAG-suksesskriterier
Tallene ved siden av en regel, for eksempel 1.1.1 eller 1.4.3, er kriteriene den tester. En regel uten oppgitt kriterium er god praksis snarere enn et krav i WCAG.
Elementer og sider
Hvor mange elementer som feilet regelen, og på hvor mange av de testede sidene. En regel som feiler på hver side, ligger som regel i en felles del som toppfeltet, menyen eller bunnfeltet.
Må vurderes
axe-core fant noe det ikke kunne avgjøre. Se på elementet selv: det kan bestå eller feile. Disse punktene telles ikke som feil.
Fokusfelle
Tab fortsatte å gå i ring gjennom de samme få elementene. Hvis de hører til et cookie-banner, kan det hende at tastaturbrukere ikke når resten av siden.
Fokus flytter seg ikke (Focus doesn’t move)
Tab ga aldri fokus til noe. Lenker og knapper kan være bygget av div- eller span-elementer, eller et skript kan svelge tastetrykket.
Hopplenke
Om det første Tab-stoppet er en «Hopp til innhold»-lenke. Uten en slik lenke må tastaturbrukere tabbe gjennom hele toppfeltet på hver side. Landemerker og overskrifter kan også oppfylle WCAG 2.4.1 Bypass Blocks.
Ingen synlig fokusmarkering
Fokuserte elementer der vi ikke så noe omriss (outline), noen skygge (box shadow) eller noen understreking. En annen stil, for eksempel en fargeendring, kan likevel være synlig, så tab gjennom disse selv for å bekrefte.

Slik fikser du de vanligste problemene

  • Tekst som ikke oppfyller kontrastforholdet

    Vanlig tekst trenger minst 4,5:1 mot bakgrunnen, og stor tekst (rundt 24 px, eller rundt 18,7 px i fet skrift) trenger 3:1. Endre fargen i temainnstillingene eller designtokenene dine i stedet for element for element, og sjekk deretter plassholdertekst, hover-tilstander og tekst over bilder på nytt.

  • Bilder uten alt-tekst

    Gi hvert meningsbærende bilde et alt-attributt som sier hva det viser eller gjør, for eksempel produktnavnet og fargen. Dekorative bilder får en tom alt (alt="") slik at skjermlesere hopper over dem. I Shopify legger du inn alt-tekst fra bildet i produktets Media-seksjon; i WordPress i feltet Alternativ tekst i Mediebiblioteket.

  • Skjemafelt uten ledetekst

    Knytt en ledetekst til hvert inndatafelt med <label for> som samsvarer med feltets id, eller bruk aria-label når det ikke finnes synlig tekst. Ikke bruk plassholdertekst som eneste ledetekst: den forsvinner så snart noen begynner å skrive. Påmeldingsskjemaer for nyhetsbrev og søkefelt i toppfeltet er de vanlige synderne.

  • Knapper og lenker uten tilgjengelig navn

    Ikonknapper for handlekurv, søk, meny eller sosiale profiler inneholder ofte bare en SVG. Legg til synlig tekst eller en aria-label som sier hva kontrollen gjør («Åpne handlekurv», ikke «ikon»), og legg til aria-hidden="true" på selve SVG-en.

  • Et cookie-banner som fanger fokuset

    Sørg for at alle knappene i banneret kan nås med Tab og brukes med Enter eller mellomromstasten, at fokuset går tilbake til siden når banneret lukkes, og at et banner som ikke blokkerer siden, ikke holder på fokuset i det hele tatt. Sjekk innstillingene i samtykkeverktøyet ditt, og oppdater det hvis skriptet er gammelt.

  • Fokusomriss fjernet i CSS

    Søk i stilarkene dine etter outline: none eller outline: 0 på lenker, knapper og :focus. Erstatt det med en synlig stil, for eksempel :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Spørsmål om verktøyet

Er denne testen av universell utforming gratis?

Ja. Du trenger ikke å registrere deg; du bekrefter bare at du eier eller forvalter nettstedet. Den betalte rapporten om universell utforming legger til opptil 20 sider til fra sitemapen din, en gjennomgang med bare tastatur, en reflow-kontroll ved 320 px, før-og-etter-kode bygget på den feilende markupen din, AI-prompter, en PDF og 5 nye tester.

Hvor mye av WCAG kan en automatisk test sjekke?

Bare en del. En regel kan sjekke at et bilde har alt-tekst, men ikke at teksten beskriver bildet, og at et felt har en ledetekst, men ikke at ledeteksten er tydelig. Se på resultatene som en liste over sikre problemer, og test resten med tastatur og skjermleser.

Hvis skanningen ikke finner noe, er nettstedet mitt da i samsvar med ADA eller WCAG?

Nei. Ingen automatisk test kan vise at et nettsted er i samsvar med WCAG eller oppfyller ADA, European Accessibility Act eller noen annen lov. Et resultat uten funn betyr at de automatiske reglene ikke fant feil på de testede sidene.

Kan jeg sjekke et testmiljø eller sider bak innlogging?

Sider bak innlogging, passord eller bot-beskyttelse kan ikke testes. Hvis bot-beskyttelsen din blokkerer skanningen, kan du tillate brukeragenten FixReportsScanner eller teste en offentlig kopi av testmiljøet.

Jeg har rettet et problem. Hvorfor ser resultatet likt ut?

Resultater for samme adresse kan bli gjenbrukt fra en skanning i løpet av den siste timen. Vent til den timen har gått, og tøm eventuell sidebuffer eller CDN-buffer før du tester igjen.

Kilder

Relaterte verktøy

«Rapport om universell utforming» ($174, engangspris) bygger på hele den gratis skanningen og legger til flere sider, endringen du skal gjøre for hvert funn, en PDF og kontrolltester som bekrefter utbedringene dine.

Les mer om «Rapport om universell utforming»