Gratisverktyg: Tillgänglighet

Tillgänglighetstest för din webbplats

Ange din adress så testar vi den sidan och upp till fyra viktiga sidor i en riktig webbläsare mot reglerna i WCAG 2.2 nivå A och AA. Varje hinder visas med elementet, sidan, en skärmbild och en förklaring av vilka det påverkar.

Gratis. Testar upp till fem viktiga sidor på ungefär en minut.

Det här kontrollerar verktyget

  • Fem sidor som representerar din webbplats

    Sidan du anger, plus upp till fyra sidor som väljs bland dess länkar utifrån vilken typ av webbplats det är. I en webbutik betyder det en kollektion, en produkt, varukorgen och en innehållssida; på andra webbplatser till exempel priser, kontakt, en artikel eller tjänster. Mallar upprepas, så en produktsida visar oftast problemen på alla produktsidor.

  • WCAG-regler på den renderade sidan

    Varje sida laddas i Chromium i 1366 × 900, och axe-core, Deques regelmotor med öppen källkod, kör sina regler för WCAG 2.0, 2.1 och 2.2 nivå A och AA efter att sidans skript har körts. Då fångas även problem som ett tema eller en app skapar först när sidan byggs upp i webbläsaren.

  • Allvarlighetsgrad och framgångskriterier

    Varje regel som inte klaras visar sin allvarlighetsgrad (kritisk, allvarlig, måttlig eller mindre), vilka WCAG-framgångskriterier den hör till och hur många element och sidor den påverkar.

  • Det felande elementet, markerat

    HTML-koden för ett exempelelement och en skärmbild av sidan där elementet är inramat, så att du eller din utvecklare hittar det i mallen utan att behöva gissa.

  • Punkter som en människa måste avgöra

    När axe-core hittar något som verktyget inte kan avgöra, till exempel text över en bakgrundsbild vars kontrast inte går att mäta, listas punkten som ”Behöver granskas”. Den räknas aldrig som ett fel.

  • Ett tangentbordstest

    På den första sidan trycker vi på tabbtangenten 40 gånger och registrerar vart fokus går: om det flyttas alls, om det fastnar i en slinga (ofta i en cookiebanner), om det första stoppet är en hopplänk och vilka fokuserade element som saknar synlig fokusmarkering. Den sista kontrollen är en heuristik och visas därför som ”Behöver granskas”.

Det här kan det inte kontrollera

  • Höra vad en skärmläsare läser upp. Programvara kan bekräfta att en knapp har ett namn, men inte att namnet är begripligt när det läses upp.
  • Bedöma undertexter, transkriptioner eller syntolkning för video och ljud.
  • Bedöma kognitiva och innehållsmässiga kriterier, till exempel om instruktioner är tydliga eller om felmeddelanden hjälper människor att rätta till misstag.
  • Testa sidor bakom inloggning, lösenord eller botskydd, eller gå igenom en kassa.
  • Avgöra om din webbplats uppfyller WCAG eller följer någon lag. Automatiska regler hittar en del av problemen; resten kräver människor.

Därför spelar det roll

Tillgänglighetshinder är ofta små misstag i mallar med stora följder. En varukorgsknapp som bara består av en ikon och saknar tillgängligt namn läses upp som enbart ”knapp”, så en skärmläsaranvändare kan inte veta vad den gör. Grå text på vit bakgrund som inte når kontrastförhållandet 4,5:1 är svårläst för många med nedsatt syn, och för alla som använder mobilen i starkt solljus.

Eftersom samma sidhuvud, produktkort och sidfot finns på varje sida kan en enda rättning i en mall ta bort hundratals fel på en gång. Därför grupperas resultaten per regel, med antal element och sidor, i stället för att varje förekomst listas som ett eget problem.

Tillgänglighet har också en juridisk sida i många länder. En skanning kan inte avgöra om en lag gäller dig eller om du uppfyller den. Det den ger dig är en daterad lista över verkliga hinder på dina egna sidor, och det är oavsett vilket den praktiska platsen att börja på.

Så läser du resultaten

Kritisk
Hindret kan helt stoppa vissa människor från att använda elementet, till exempel ett formulärfält utan etikett eller en knapp utan namn. Åtgärda dessa först.
Allvarlig
Hindret gör en uppgift mycket svårare för vissa människor, till exempel brödtext som inte når kontrastkravet.
Måttlig
Hindret orsakar svårigheter eller förvirring, men det går oftast att ta sig runt det.
Mindre
Ett litet problem eller irritationsmoment. Ändå värt att åtgärda nästa gång du redigerar mallen.
WCAG-framgångskriterier
Numren bredvid en regel, till exempel 1.1.1 eller 1.4.3, är de kriterier som regeln testar. En regel utan angivet kriterium är god praxis snarare än ett krav i WCAG.
Element och sidor
Hur många element som inte klarade regeln och på hur många av de testade sidorna. En regel som underkänns på varje sida sitter oftast i en gemensam del som sidhuvudet, menyn eller sidfoten.
Behöver granskas
axe-core hittade något som verktyget inte kunde avgöra. Titta på elementet själv: det kan klara eller inte klara kravet. Dessa punkter räknas inte som fel.
Fokusfälla
Tabbtangenten fortsatte att cirkulera genom samma få element. Om de hör till en cookiebanner kan tangentbordsanvändare ha svårt att nå resten av sidan.
Fokus flyttas inte (Focus doesn’t move)
Tabbtangenten gav aldrig fokus till något. Länkar och knappar kan vara byggda av div- eller span-element, eller så kan ett skript svälja tangenttrycket.
Hopplänk
Om det första tabbstoppet är en länk av typen ”Hoppa till innehållet”. Utan en sådan måste tangentbordsanvändare tabba igenom hela sidhuvudet på varje sida. Landmärken och rubriker kan också uppfylla WCAG 2.4.1 Bypass Blocks.
Ingen synlig fokusmarkering
Fokuserade element där vi inte såg någon kontur (outline), skugga (box-shadow) eller understrykning. En annan stil, till exempel ett färgbyte, kan ändå vara synlig, så tabba igenom dessa själv för att bekräfta.

Så åtgärdar du de vanligaste problemen

  • Text som inte når kontrastkravet

    Normal text behöver minst 4,5:1 mot bakgrunden, och stor text (cirka 24 px, eller cirka 18,7 px i fetstil) behöver 3:1. Ändra färgen i temainställningarna eller i dina design tokens i stället för element för element, och kontrollera sedan platshållartext, hovringslägen och text över bilder igen.

  • Bilder utan alt-text

    Ge varje meningsfull bild ett alt-attribut som säger vad den visar eller gör, till exempel produktnamn och färg. Dekorativa bilder får ett tomt alt (alt="") så att skärmläsare hoppar över dem. I Shopify lägger du till alt-text via bilden i produktens avsnitt Media; i WordPress i fältet Alternativ text i mediabiblioteket.

  • Formulärfält utan etiketter

    Koppla en etikett till varje fält med <label for> som matchar fältets id, eller använd aria-label när det inte finns någon synlig text. Lita inte på platshållartext som enda etikett: den försvinner så fort någon börjar skriva. Formulär för nyhetsbrev och sökrutor i sidhuvudet är de vanliga bovarna.

  • Knappar och länkar utan tillgängligt namn

    Ikonknappar för varukorg, sök, meny eller sociala profiler innehåller ofta bara en SVG. Lägg till synlig text eller ett aria-label som säger vad kontrollen gör (”Öppna varukorgen”, inte ”ikon”), och lägg till aria-hidden="true" på själva SVG:n.

  • En cookiebanner som fångar fokus

    Se till att varje knapp i bannern kan nås med Tabb och användas med Enter eller mellanslag, att fokus återgår till sidan när bannern stängs och att en banner som inte blockerar sidan inte håller kvar fokus alls. Kontrollera inställningarna i ditt samtyckesverktyg och uppdatera det om skriptet är gammalt.

  • Fokusmarkeringar borttagna i CSS

    Sök i dina stilmallar efter outline: none eller outline: 0 på länkar, knappar och :focus. Ersätt det med en synlig stil, till exempel :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }.

Frågor om verktyget

Är det här tillgänglighetstestet gratis?

Ja. Du behöver inte registrera dig; du bekräftar bara att du äger eller förvaltar webbplatsen. Den betalda Tillgänglighetsrapporten lägger till upp till 20 sidor till från din sitemap, en genomgång med enbart tangentbord, en kontroll av ombrytning (reflow) vid 320 px, kod före och efter som bygger på din felande kod, AI-promptar, en PDF och 5 omtester.

Hur stor del av WCAG kan ett automatiskt test kontrollera?

Bara en del. En regel kan kontrollera att en bild har alt-text, men inte att texten beskriver bilden, och att ett fält har en etikett, men inte att etiketten är tydlig. Se resultaten som en lista över säkra problem och testa sedan resten med tangentbord och skärmläsare.

Om skanningen inte hittar något, uppfyller min webbplats då ADA eller WCAG?

Nej. Inget automatiskt test kan visa att en webbplats uppfyller WCAG eller följer ADA, den europeiska tillgänglighetsakten (EAA) eller någon annan lag. Ett rent resultat betyder att de automatiska reglerna inte hittade några fel på de testade sidorna.

Kan jag testa en testmiljö (staging) eller sidor bakom inloggning?

Sidor bakom inloggning, lösenord eller botskydd kan inte testas. Om ditt botskydd blockerar skanningen kan du tillåta användaragenten FixReportsScanner eller testa en offentlig kopia av testmiljön.

Jag har åtgärdat ett problem. Varför ser resultatet likadant ut?

Resultat för samma adress kan återanvändas från en skanning under den senaste timmen. Vänta tills den timmen har gått och töm eventuell sidcache eller CDN-cache innan du testar igen.

Källor

Relaterade verktyg

Vår Tillgänglighetsrapport ($174, engångspris) utgår från den fullständiga gratisskanningen och lägger till fler sidor, ändringen som ska göras för varje fynd, en PDF och omtester för att verifiera dina åtgärder.

Läs mer om vår Tillgänglighetsrapport