Share
Å takle utfordringen med å skape et tilgjengelig nettsted - eller lage et eksisterende nettsted tilgjengelig - kan noen ganger være en vanskelig oppgave. Det kan være vanskelig å forstå nøyaktig hvordan En bruker med nedsatt syn, for eksempel, kan bruke et nettsted. Det kan selvfølgelig være vanskelig for oss å være lykkelig fornøyd med at våre sider er tilgjengelige.
I dette innlegget vil jeg vise deg at testing av tilgjengelighet ikke må være en vanskelig oppgave. Jeg vil gå deg gjennom verktøyene og prosessene vi bruker hos Envato for å holde plattformene våre anvendelige for alle som har alle muligheter og for å sikre at tilgjengeligheten forblir i front når vi leverer nye funksjoner.
Denne artikkelen er en del av Web Accessibility: The Complete Learning Guide, hvor vi har samlet en rekke opplæringsprogrammer, artikler, kurs og e-bøker for å hjelpe deg å forstå web tilgjengelighet fra begynnelsen.
Et av de viktigste verktøyene vi bruker når du vurderer tilgjengeligheten vår er Google Lighthouse. Fyr er et verktøy for å vurdere i hvilken grad et nettsted møter bransjens beste praksis - enten det er for ytelse, SEO eller i vårt tilfelle, tilgjengelighet.
Fyr kan kjøres enten via nettgrensesnittet eller via Chrome-utviklerverktøyene. En viktig fordel ved å bruke fyr er at det gjør at vi kan vite nøyaktig hva Google stoler på når de bestemmer hvor tilgjengelig de tro at nettstedet vårt skal være.
For å få tilgang til fyrtårn via Chrome-utviklerverktøyene:
Running Lighthouse via Chrome utviklerverktøy.Når vi kjører, får vi en pause ned der nettstedet vårt kan forbedres for å bli mer tilgjengelig. For eksempel ser resultater fra ThemeForest-søkesiden ut slik:
Fyrresultater for ThemeForest-søkesiden.Fyr gir oss en liste over områder der vår side er ikke anses tilgjengelig, samt en liste over manuelle sjekker vi kan utføre for å sikre tilgjengelighet er det beste det kan være. Hvis en bestemt sjekk ikke gir mening, gir Lighthouse inline linker for å lese mer om hva som skal gjøres.
Fra ovennevnte rapport kan jeg se at vi skal se for å forbedre fargekontrast for å bedre imøtekomme dem med nedsatt syn. Jeg kan også se at jeg skal kunne bla gjennom siden på en måte som gir mening i sammenheng, samt ulike andre sjekker.
Et annet fantastisk verktøy vi bruker på Envato, er pa11y (oppkalt etter forkortelsen som vanligvis er gitt for tilgjengelighet, "a11y". Pa11y gir oss mulighet til å angi et forhåndsdefinert tilgjengelighetsspesifikasjonsnivå - Seksjon 508, WCAG 2.0 A, AA eller AAA - og teste en nettside mot disse spesifikasjonene.
Når du kjører, gir pa11y oss en liste over tilgjengelighetsspesifikasjonene vi møter, og de vi ikke møter ennå, samt en anbefaling om hvordan du oppnår samsvar med hver standard. Fordelen med å bruke pa11y er at det gjør oss i stand til å være helt sikker på at WCAG-spesifikasjonene overholdes, samt gi oss konkrete tiltak for å bli mer kompatible.
pa11y resultatside.På Envato kjører vi automatisk automatisk før hvert nytt stykke kode distribueres til plattformene våre ved hjelp av pa11y-ci. Imidlertid kan pa11y også kjøres ved hjelp av skrivebordsapplikasjonen Koa11y.
Koa11y grensesnitt.Et område der Firefox utviklerverktøy utmerker, er å inspisere hvor tilgjengelig vårt nettstedinnhold er. Dette gjør at vi kan gjette arbeidet uten å forstå hvordan en skjermleser leser innholdet til en bruker.
Slik aktiverer du tilgjengelighetsinspektøren i Firefox:
Aktiverer tilgjengelighetspanelet i Firefox-utviklerverktøy.Når det er aktivert, blir en tilgjengelighetsfane tilgjengelig for oss. Dette gjør at vi kan se vår side som en skjermleser kan lese det høyt.
Firefox tilgjengelighet inspektørDe aria-rolle er oppført til venstre, i dette tilfellet heller seksjon, link eller grafisk. Ikke alle elementer skal ha et navn, men attributtet er en god måte å indikere noe på en bruker. Vi kan inkludere et navn ved å sørge for tekstlig innhold, et bilde alt tag, eller en aria-etikett Attributtet er til stede. Vi kan også sveve over rollen og ha Firefox markere det tilsvarende elementet i oppslaget.
Å bla gjennom dette treet er nyttig for seg selv bare for å få en forståelse av hva nettstedet vårt ser ut uten å forstyrre oss fra innholdet. Det er også en utmerket måte å få en forståelse for hvordan en ny funksjon kan vises for brukerne.
Et annet nyttig nivå av kontroller vi bruker når du skriver kode er gjort via kode linting. Linting tillater oss å bli automatisk varslet til koden som er garantert å være utilgjengelig. Vi bruker en delmengde av Microsofts TypeScript-linting-regler for å linte våre TypeScript. Vi bruker også eslint-plugin-jsx-a11y-pakken for å linte JavaScript.
En linter kan for eksempel advare meg om at jeg hadde glemt å inkludere en alt merk på følgende bilde:
Et annet eksempel kan være en advarsel for inkludering av et element som kan være distraherende for de som bruker skjermlesere:
Linting gir øyeblikkelig tilbakemelding slik at vi kan gjøre raske endringer når vi går for å sikre at sluttproduktet er så tilgjengelig som mulig.
Vi bruker en rekke nettleserutvidelser for å få en bedre følelse av hvordan en bruker kan oppleve nettstedet vårt når vi lager det, slik at vi kan gjøre justeringer når vi går. Dette er et par stand-out-utvidelser som vi har flagget som spesielt hjelpsomme.
Spektrum lar deg se nettstedet ditt på samme måte som de med ulike former for fargeblindhet, ville se det. Med dette kan vi se deler av nettstedet vårt som kan ha dårlig kontrast mot bakgrunnen, eller koblinger hvis aktive stater er for likt deres passive stater.
ThemeForest hjemmeside som sett av noen med Achromatopsia.Mørk bakgrunn og lys tekst lar deg vise nettstedet ditt i høy kontrast modus - en modus som ofte brukes av de som krever høy grad av tilgjengelighet. Med dette kan vi se om deler av nettstedet vårt er enten for rotete eller for små til å bli sett effektivt i denne modusen.
ThemeForest hjemmeside sett i inverse farge.Denne er bare tilgjengelig for de med Mac, men det går langt i å oppleve et nettsted som en bruker med lav visjon. VoiceOver leser valgt tekst til oss på kommando. Det tar litt å bli vant til, men en gang lært det er lett å bruke. På nettet har VoiceOver best støtte for Safari, men den kan brukes med hele Mac OSX-operativsystemet.
Aktiver VoiceOver med CMD + F5. Når aktivert, kan noen praktiske funksjoner du kan slå på:
Å sørge for at nettstedet ditt er tilgjengelig er absolutt verdt. Det blir ofte sett på som en oppgave som enten er for vanskelig, eller som har blitt igjen for sent for å oppnå. Ingen av disse er sanne, og absolutt ikke det vi har funnet på Envato. Bruke teknikker og verktøy som de som jeg har beskrevet ovenfor, tar mye av stresset og gjetter å bygge opp en tilgjengelig nettside, noe som gir oss selvsikkerhet om at sluttproduktet vil være vennlig til alle våre brukere.
Accentsconagua