Hur vet du om din webbplats är 100% WCAG 2.1-kompatibel? Vilka är de bästa webbtillgänglighetstestningsverktygen där ute som du kan använda?, Här är 5 automatiserade tillgänglighetstestverktyg som vi rekommenderar att du försöker först:
foto av John Schnobrich på Unsplash
du har gått igenom de riktlinjer, standarder, varningar och bästa praxis som ingår i W3C-rekommendationerna och… du har fastnat. Hur vet du om din webbplats är 100% WCAG 2.1 kompatibel? Vilka är de bästa webbtillgänglighetstestningsverktygen där ute som du kan använda?,
gratis, lättanvända verktyg för utvärdering av tillgänglighet som du kan köra på din webbplats för att upptäcka problemen som lurar där.
och som även kan ge dig några värdefulla rekommendationer om de bästa sätten att ta itu med dem.
allt detta innan du faktiskt har någon (eller till och med ett helt team av QA-testare) granska din webbplats. Innan du utför en fördjupad tillgänglighetsrevision och kör användarcentrerade testsessioner med … riktiga människor inblandade.,
Du måste tänka på webbläsartillägg…
de är så tillgängliga: du öppnar bara den sida du vill kontrollera och klickar på en knapp i verktygsfältet. De är gratis och gör bra ”startar” för att identifiera tillgänglighetsfrågor på din webbplats. Och för att få händerna på några värdefulla rekommendationer om hur man fixar dem.
så här är 5 automatiserade verktyg för tillgänglighetstestning som vi rekommenderar att du försöker först:
”finns det några rekommenderade verktyg som kan hjälpa mig att testa tillgänglighetsfrågor?,r kontrast på vissa sidor (eller ingen kontrast alls)
en eller flera bilder har inte ALT-beskrivningar lagts till
en redaktör raderade innehållet för en av H2-taggarna men lämnade den taggen kvar där och förvirrade skärmläsarna
någon från ditt designteam har lagt en platshållartext istället för ett textfält, vilket riskerar att visa ett omärkt fält, att skärmläsarna inte kan… Läs
Det finns en etikett som saknas i ditt nyhetsbrev/ul>
det här är alla vanliga problem som verktyg för utvärdering av webbtillgänglighet kan hjälpa dig att upptäcka och ta itu med.,
de faller i flera kategorier:
webbläsartillägg, som vi kommer att fokusera på i det här inlägget
kommandoradsverktyg tillgänglighetstestverktyg som du kan integrera med ditt kontinuerliga integrationssystem
tips: kom ihåg att följande 5 bästa verktyg för webbtillgänglighetstestning upptäcker cirka 30% av problemen. De gör en bra utgångspunkt för en mer komplex revision och omfattande övervakningsstrategi som du bör sätta på plats.,
Wave, verktyget vördade webbtillgänglighet utvärdering för Chrome
en fullfjädrad, lättanvänd webbplats tillgänglighet checker som har varit i de flesta utvecklarens verktygslådor för ganska några år nu.,
Så här fungerar det:
Det lägger till en visuell överlagring av error icons and indications to the web page that you ’ re auditing
icons which, once clicked, provide you with information and recommendations about the accessibility issues detected: redundanta titlar, strukturella element, länkar till HTML, dålig färgkontrast, hur dessa frågor påverkar olika typer av användare, vilka WCAG-riktlinjer de bryter mot, etc.,
det påpekar för dig den ”besvärliga” koden via kommenterad HTML poppar upp i panelen längst ner på skärmen
kort sagt, Wave är en av de robusta webbplats tillgänglighet checkers som går utöver att effektivisera din revisionsprocess.
det är också inriktat på att utbilda användare (webbplatsägare, QA-testare) om tillgänglighetsfrågorna att uppmärksamma.
”hur använder du verktyget Wave accessibility?,”
hur som helst:
Du kan bara ange din URL i det dedikerade fältet på deras hemsida
Du kan ladda ner webbläsartillägget
gå till tillägget, särskilt om det är dynamiskt, lösenordsskyddat och lokalt lagrade webbsidor som du behöver kontrollera.
Tenon, tillgänglighet som tjänst
” hur testar jag tillgänglighet?”
tenons ett annat verktyg som kommer både i en gratis och betald version.,
What makes it ”worthy” of this top 5 selection?,y-tester efter försummade riktlinjer har redan blivit kritiska problem som påverkar användarupplevelsen
Det är ett så flexibelt verktyg för innehållsskapare, designers, utvecklare och testare
Det genererar… generösa rapporter med kodavsnitt för varje fel, motsvarande WCAG-riktlinjer och rekommendationer om hur man åtgärdar dem
kort sagt: tenon hjälper dig att köra en förebyggande typ av tillgänglighetskontroll på din webbplats., Du kan upptäcka viktiga problem innan de ens får förvandlas till stora användbarhetsproblem
Dessutom kan du enkelt införliva Tenon i din verktygsuppsättning via dess API. Den integreras smidigt med alla CMS, IDE, distribuera verktyg eller automatiserad bygga som du kan använda.
Google Lighthouse, ett av de bästa automatiserade Tillgänglighetstestverktygen
”hur vet jag om min webbplats faktiskt är WCAG 2.0-kompatibel?,för att använda
dessutom är detta verktyg för tillgänglighetstestning en del av en hel uppsättning kontroller som du kan köra med hjälp av Chrome Developer Tools:
SEO
progressiv webbapp
prestanda
bästa praxis
vad det ger dig en fullständig rapport om dess testresultat:
om alla knappar på den sidan har tillgängliga namn eller inte
om alla bilder har alt-attribut till
om den sidan har en titel eller inte …
därefter tar du det därifrån och förbättrar de områden som signaleras i rapporten.,
och så här använder du det:
öppna devtools i webbläsaren Chrome
leta efter fliken ”revisioner”
Klicka på ”Utför en revision”
tips: spara rapporten i ett JSON-format för senare (eller för att skicka den till någon i ditt lag).
en annan bra sak med Google Lighthouse är att det är ett av de verktyg för utvärdering av webbtillgänglighet som inte kräver att du registrerar dig. Du drar bara en rapport till online rapportvisare som det ger dig.
Axe webbläsartillägg
”hur vet du om din webbplats faktiskt är WCAG 2.,0 överensstämmande?”
Du ”grab” ett verktyg som Axe här och ge din webbplats en automatiserad revision.
det kommer bara att fästa sig som en ny flik till Chrome Dev-verktyg. När du klickar på den blå ”Analysera” – knappen får du en hel lista med” överträdelser ” som upptäcks på din sida.
Varför har vi inkluderat det i vår mycket exklusiva lista över 5 bästa webbtillgänglighetstestverktyg?,
eftersom det är gratis (ett fristående open source-bibliotek)
eftersom du får anpassa det till dina specifika tillgänglighetstestbehov: Lägg till specifika regler, integrera det med testramar och webbläsare som du väljer…
eftersom varje signalerat problem ”exponerar” motsvarande markering, samt
tryck bara på ” inspektera kod ”och du tas till fliken i DevTools, där” skyldige elementet ” beskrivs.,
Tips: En annan anledning till att detta är en av de första tillgänglighetscheckarna på webbplatsen som du bör överväga är att Axe-tillgänglighetsrapporten går utöver att signalera tydliga överträdelser av tillgänglighetsriktlinjerna.
det belyser också aspekter som du kan förbättra på din webbplats UI.
Siteimprove, ett av de bästa verktygen för Webbtillgänglighetstestning
Vi kan inte göra det här.bekänn: Siteimprove är vår favorit webbplats tillgänglighet Checker., Här är varför:
Det ger oss värdefull information om alla problem som den upptäcker
Det genererar tydliga förklaringar om effekterna av dessa problem på vissa användare
det också ”förstör” oss med intuitiv användarupplevelse: problem blir markerade till höger på sidan
var lägger du till att hela webbsidgranskningsprocessen utförs i våra webbläsare i Chrome.
lätt att använda och mycket effektiv. Vad mer kan du önska från ett gratis tillgänglighetstestverktyg?,
sista ordet
förvandla denna typ av tillgänglighetstestning — med hjälp av Chrome — tillägg-till en del av en mer omfattande teststrategi.
Du bör inte begränsa din utvärdering till de resultat du får genom att använda något av dessa 5 bästa testverktyg för webbtillgänglighet.
det finns fortfarande en viss nivå av ”mänsklig intervention” som behövs för att tolka dessa resultat. Att komma med rätt uppsättning åtgärder att vidta, eller hur?,
använd dem om du bara vill kontrollera om:
Det finns några bilder utan ALT-beskrivningar på din webbplats
HTML-koden är giltig
dina formulärfält har både etiketter och beskrivningar
För att bedöma:
om den HTML-koden är semantisk eller inte
om dessa formulärfältbeskrivningar är användarvänliga nog
om det finns en lämplig rubrik på hierarki på en viss sida på din webbplats
… du behöver mänsklig analys.,
automatiserad tillgänglighetstestning kommer (endast) att peka på viktiga aspekter för dina QA-testare att fokusera på.
slutet!
har du använt något av dessa tillgänglighetstestverktyg på din webbplats?
brukar du stoppa din revision där eller använder du en automatiserad& Manuell testtyp av ”combo”? Beror det på sammanhanget faktiskt?
