Gratisverktyg: Tillgänglighet

WCAG 2.2-kontroll av din webbplats

Se var din webbplats står för vart och ett av de 55 framgångskriterierna i WCAG 2.2 nivå A och AA. Varje kriterium får en av fyra statusar, så att du ser vad de automatiska testerna täckte och vad en människa fortfarande måste kontrollera.

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

Det här kontrollerar verktyget

  • Varje kriterium på nivå A och AA

    Alla 55 kriterier, 31 på nivå A och 24 på nivå AA, i WCAG-ordning med nummer och namn. 4.1.1 Parsing är utelämnat eftersom WCAG 2.2 markerar det som föråldrat.

  • Automatiska resultat kopplade till kriterier

    Reglerna i axe-core körs på sidan du anger och upp till fyra viktiga sidor, och varje resultat kopplas till de framgångskriterier som regeln testar. Ett kriterium underkänns när någon av dess regler inte klaras på någon av de testade sidorna.

  • Belägg från tangentbordet

    Ett test med 40 tryck på tabbtangenten på den första sidan ger underlag för 2.1.2 No Keyboard Trap och, som en heuristik som visas för granskning, för 2.4.7 Focus Visible.

  • Oavgjorda resultat hålls isär

    När en regel inte kan komma fram till ett utslag, till exempel för text över en bild, visar dess kriterier ”Behöver granskas” i stället för godkänt eller underkänt.

  • Synliga luckor i stället för ett poängtal

    Kriterier som ingen automatisk regel täcker markeras som ”Manuell kontroll” (Manual check). Inget slås ihop till en procentsats som skulle dölja vad som inte testades.

Det här kan det inte kontrollera

  • Avgöra kriterier som kräver mänsklig bedömning, till exempel 1.4.10 Reflow, 1.4.11 Non-text Contrast, 1.2-kriterierna om undertexter och syntolkning samt 3.3.1 till 3.3.4 om fel i formulär.
  • Göra ”Inga automatiska fel” (No automated failures) till ett godkänt. En regel som kördes och klarades täcker bara det som just den regeln testar.
  • Ta fram ett påstående om överensstämmelse, en tillgänglighetsredogörelse eller en VPAT. Överensstämmelse bedöms av människor, på hela sidor och kompletta processer.
  • Testa nivå AAA, eller fler sidor än de fem i skanningen.
  • Nå stegen bakom en inloggning eller i en kassa, där kriterier som 3.3.7 Redundant Entry och 3.3.8 Accessible Authentication oftast gäller.

Därför spelar det roll

WCAG är skrivet som framgångskriterier, och det är så granskare, upphandlare och tillgänglighetsredogörelser beskriver en webbplats. En lista över regler som inte klaras talar om vad du ska åtgärda. En vy per kriterium visar vad du kan och ännu inte kan säga om webbplatsen.

Automatiska verktyg berör färre än hälften av kriterierna på nivå A och AA: axe-core kopplar sina regler till ungefär 25 av de 55. För resten finns inget tillförlitligt automatiskt test. Programvara kan inte avgöra om ett felmeddelande föreslår en rättelse (3.3.3) eller om en sida fortfarande fungerar vid en bredd på 320 CSS-pixlar (1.4.10). När de listas som manuella kontroller syns det var testningen fortfarande måste göras.

Även ett kriterium utan automatiska fel kan underkännas. Reglerna för 1.1.1 Non-text Content kontrollerar att en bild har alt-text; de kan inte se att alt="IMG_2041.jpg" är meningslöst för den som inte kan se fotot.

Så läser du resultaten

Underkänt
Minst en automatisk regel som hör till kriteriet underkändes på en testad sida. Det är ett säkert problem; tillgänglighetstestet visar elementen och sidorna bakom det.
Behöver granskas
En automatisk kontroll flaggade något som den inte kunde avgöra, till exempel kontrasten för text på en gradient. En människa måste titta på elementet.
Inga automatiska fel
Minst en regel i axe-core som hör till kriteriet kördes och klarades. Det innebär inte överensstämmelse: reglerna täcker bara en del av det som kriteriet kräver.
Inte utlöst
Det finns automatiska regler för kriteriet, men inget på de testade sidorna gav dem något att kontrollera, till exempel ingen video för reglerna om undertexter eller inga formulär för reglerna om etiketter. Testa det för hand om din webbplats har sådant innehåll på andra ställen.
Manuell kontroll
Ingen automatisk regel täcker kriteriet, så skanningen säger ingenting om det, varken åt det ena eller det andra hållet. Testa det för hand.
Nivå A och nivå AA
Nivå A är miniminivån. Policyer som hänvisar till WCAG anger oftast nivå AA, som omfattar alla kriterier på nivå A.

Så åtgärdar du de vanligaste problemen

  • 4.1.2 Name, Role, Value underkänt

    Egna kontroller byggda av div- eller span-element (menyer, flikar, dragspelsmenyer, reglage) berättar inte för hjälpmedel vad de är eller om de är öppna. Använd ett inbyggt <button>-element där det går, ge det ett namn och sätt aria-expanded eller aria-pressed så att dess läge läses upp.

  • 1.3.1 Info and Relationships underkänt

    Strukturen måste finnas i koden, inte bara i utseendet. Använd riktiga h2- och h3-element i stället för fetstilta stycken, ul eller ol för listor, th med scope för tabellrubriker och etiketter eller fieldset med legend för grupper av formulärfält.

  • 3.1.1 Language of Page underkänt

    Lägg till ett lang-attribut på html-elementet, till exempel <html lang="en">. WordPress-teman skriver normalt ut det med language_attributes(); i ett Shopify-tema använder du <html lang="{{ request.locale.iso_code }}"> i layout/theme.liquid.

  • 2.5.8 Target Size (Minimum) underkänt

    Små ikoner och tätt placerade länkar är svåra att träffa med fingret. Gör varje klickyta minst 24 × 24 CSS-pixlar, eller placera små klickytor så att en cirkel på 24 px centrerad på var och en inte överlappar någon annan klickyta. Utfyllnad (padding) gör klickytan större utan att ändra ikonen.

  • Att arbeta sig igenom de manuella kontrollerna

    Börja med de snabba. För 1.4.10 Reflow zoomar du ett 1280 px brett webbläsarfönster till 400 % och kontrollerar att inget kräver vågrät rullning. För 2.4.7 och 2.4.11 tabbar du igenom sidan och kontrollerar att fokus alltid syns och aldrig döljs bakom ett fast sidhuvud eller en cookiebanner. För 3.3.1 skickar du ett formulär med fel och ser om felen beskrivs tydligt i text.

Frågor om verktyget

Vad ändrades på nivå A och AA i WCAG 2.2?

Sex kriterier tillkom: 2.4.11 Focus Not Obscured (Minimum), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 3.2.6 Consistent Help, 3.3.7 Redundant Entry och 3.3.8 Accessible Authentication (Minimum). WCAG 2.2 lägger också till tre kriterier på nivå AAA och tar bort 4.1.1 Parsing.

Varför finns inte 4.1.1 Parsing med?

WCAG 2.2 markerar 4.1.1 Parsing som föråldrat och tar bort det, eftersom webbläsare och hjälpmedel inte längre är beroende av de kodfel som kriteriet gällde. W3C anger att det för WCAG 2.0 och 2.1 numera behandlas som alltid uppfyllt för HTML-innehåll.

Uppfyller jag även WCAG 2.1 om jag uppfyller WCAG 2.2?

Ja. WCAG 2.2 är bakåtkompatibelt: innehåll som uppfyller 2.2 uppfyller också 2.1 och 2.0. Att testa mot 2.2 täcker därför de äldre versioner som många policyer fortfarande hänvisar till.

Kan jag använda det här för att skriva en tillgänglighetsredogörelse eller en VPAT?

Det är en utgångspunkt, inte en rapport om överensstämmelse. En redogörelse eller en VPAT kräver att varje kriterium utvärderas, de flesta av en människa; listorna ”Manuell kontroll” (Manual check) och ”Behöver granskas” visar vilka som fortfarande behöver det.

Varför står det ”Manuell kontroll” vid så många kriterier?

Eftersom det inte finns någon automatisk regel för dem. Frågor som om en tidsgräns kan förlängas, om hjälp finns på samma ställe på varje sida eller om en inloggning kräver ett minnestest beror på hur människor använder webbplatsen, inte på kod som en regel kan läsa.

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