Share
Att hantera utmaningen att skapa en tillgänglig webbplats - eller göra en befintlig webbplats tillgänglig - kan ibland vara en svår uppgift. Det kan vara besvärligt att förstå exakt på vilket sätt En användare med nedsatt syn kan till exempel använda en webbplats. Det kan naturligtvis vara svårt för oss att vara glatt övertygade om att våra webbplatser är tillgängliga.
I det här inlägget visar jag att testningens tillgänglighet inte behöver vara en svår uppgift. Jag går igenom de verktyg och processer vi använder hos Envato för att hålla våra plattformar användbara för dem med alla nivåer av förmåga och för att säkerställa tillgänglighet stannar framför oss när vi levererar nya funktioner.
Den här artikeln ingår i Web Accessibility: den fullständiga lärarhandboken, där vi har samlat in en rad tutorials, artiklar, kurser och e-böcker för att hjälpa dig att förstå webbåtkomst från början.
Ett av de viktigaste verktygen vi använder när vi bedömer vår tillgänglighet är Google Lighthouse. Lighthouse är ett verktyg för att bedöma i vilken utsträckning en webbplats möter branschens bästa praxis, oavsett om det gäller prestanda, SEO eller i vårt fall tillgänglighet.
Fyren kan köras antingen via nätgränssnittet eller via verktygen för Chrome-utvecklare. En viktig fördel med att använda fyren är att det låter oss veta exakt vad Google bygger på när man bestämmer hur lättillgängligt det är de tro på att vår webbplats ska vara.
För att komma åt fyren via verktygen för Chrome-utvecklare:
Running Lighthouse via Chrome-utvecklarverktyg.När vi har kört, får vi en paus där vår webbplats kan förbättras för att bli mer tillgänglig. Till exempel ser resultaten från ThemeForest-söksidan ut så här:
Fyr resultat för ThemeForest söksida.Fyren ger oss en lista över områden där vår sida är inte anses vara tillgänglig, liksom en lista över manuella kontroller som vi kan utföra för att säkerställa tillgängligheten är det bästa det kan vara. Om en viss check inte är meningsfull, erbjuder Lighthouse inline länkar för att läsa mer om vad som ska göras.
Från ovanstående rapport kan jag se att vi ska se efter att förbättra vår färgkontrast för att bättre tillgodose dem med nedsatt syn. Jag kan också se att jag borde kunna flikta igenom sidan på ett sätt som är meningsfullt i sammanhanget, liksom olika andra kontroller.
Ett annat fantastiskt verktyg som vi använder på Envato är pa11y (namnges efter förkortningen som allmänt ges för tillgänglighet, "a11y". Pa11y tillåter oss att ange en fördefinierad tillgänglighetsspecifikationsnivå - avsnitt 508, WCAG 2.0 A, AA eller AAA - och testa en webbsida mot dessa specifikationer.
När vi kör, ger pa11y oss en lista över tillgänglighetsspecifikationerna vi möter och de vi ännu inte möter, samt en rekommendation om hur man uppfyller kraven för varje standard. Fördelen med att använda pa11y är att det gör det möjligt för oss att vara helt säkra på att WCAG-specifikationer följs och att vi ger konkreta åtgärder för att bli mer kompatibla.
pa11y resultatsida.Vid Envato kör vi automatiskt automatiskt innan varje ny kodkod distribueras till våra plattformar med pa11y-ci. Dock kan pa11y också köras med skrivbordsprogrammet Koa11y.
Koa11y gränssnitt.Ett område där Firefox utvecklingsverktyg utmärker sig är att inspektera hur tillgängligt vårt webbplatsinnehåll är. Detta gör det möjligt för oss att ta gissningsarbetet utifrån att förstå hur en skärmläsare läser innehållet till en användare.
Så här aktiverar du tillgänglighetsinspektören i Firefox:
Aktiverar tillgänglighetspanelen i utvecklingsverktyg för Firefox.När en gång är aktiverad blir en tillgänglighetsflik tillgänglig för oss. Detta gör att vi kan se vår webbplats som en skärmläsare kan läsa den högt.
Firefox-tillgänglighetsinspektörDe aria-roll är listad till vänster, i det här fallet antingen sektion, länk eller grafisk. Inte varje element ska ha ett namn, men attributet är ett bra sätt att ange något för en användare. Vi kan inkludera ett namn genom att se till att textinnehåll, en bild alt tagg eller en aria-etikett attributet är närvarande. Vi kan också sväva över rollen och ha Firefox markera motsvarande element i markeringen.
Att bläddra i det här trädet är användbart för sig själv för att få en förståelse för hur vår webbplats ser ut utan att något distraherar oss från innehållet. Det är också ett utmärkt sätt att få en förståelse för hur en ny funktion kan visas för våra användare.
En annan användbar nivå av kontroller som vi använder när du skriver ut kod görs via kodlinsering. Linting tillåter oss att automatiskt varnas till bitar av kod som garanteras vara otillgängliga. Vi använder en delmängd av Microsofts TypeScript-lineringsregler för att linta vårt TypeScript. Vi använder också paketet eslint-plugin-jsx-a11y för att linta vår JavaScript.
En linter kan varna mig, till exempel, att jag hade glömt att inkludera en alt tagga på följande bild:
Ett annat exempel kan vara en varning för införandet av ett element som kan distrahera dem som använder skärmsläsare:
Linting ger omedelbar återkoppling så att vi kan göra snabba förändringar när vi går för att säkerställa att slutprodukten är så tillgänglig som möjligt.
Vi använder ett antal webblänstillägg för att få en bättre känsla för hur en användare kan uppleva vår webbplats när vi skapar den, så vi kan göra justeringar när vi går. Det här är ett par stand-out-extensions som vi har flaggat för att vara särskilt användbara.
Spektrum låter dig se din webbplats på samma sätt som de med olika former av färgblindhet skulle se den. Med detta kan vi se delar av vår webbplats som kan ha dålig kontrast mot bakgrunden, eller länkar vars aktiva stater är för lika med deras passiva stater.
ThemeForest hemsida som ses av någon med Achromatopsia.Mörk bakgrund och ljustext låter dig se din webbplats i kontrastläge - ett läge som ofta används av dem som kräver hög tillgänglighet. Med detta kan vi se om delar av vår sida är antingen för ringa eller för små för att ses effektivt i det här läget.
ThemeForest hemsida ses i invers färg.Den här är bara tillgänglig för dem med en Mac, men det går längs med att uppleva en webbplats som användare med låg vision. VoiceOver läser valda text till oss på kommandot. Det tar lite att vänja sig, men en gång lärt sig det är lätt att använda. På webben har VoiceOver bästa stöd för Safari, men det kan användas med hela Mac OSX-operativsystemet.
Aktivera VoiceOver med CMD + F5. När du har aktiverat kan några bekväma funktioner du kan slå på:
Att se till att din webbplats är tillgänglig är absolut värt att göra. Det ses ofta som en uppgift som antingen är för svår, eller som har lämnats för sent för att uppnå. Ingen av dessa är sanna, och det är verkligen inte vad vi hittat på Envato. Att använda tekniker och verktyg som de som jag har beskrivit ovan tar mycket av krångel och gissar att arbeta med att bygga en tillgänglig webbplats, vilket ger oss förtroende för att slutprodukten kommer att vara vänlig att Allt våra användare.
Accentsconagua