Hva om jeg fortalte deg webdesignere der ute at det er folk som kan besøke nettstedet ditt, som ikke bryr seg hvordan det ser ut?
Synshemmede mennesker navigerer på nettet av samme grunner som vi alle gjør, for å finne informasjon, å handle og å utføre en rekke viktige oppgaver ved hjelp av web-baserte applikasjoner. Men synskadede opplever Internett på en annen måte, og vi må være følsomme overfor deres behov når vi designer og bygger nettsteder.
Ifølge US Census Bureau og FN og Verdensbanken har over 47 millioner amerikanere, og opptil 650 millioner mennesker over hele verden, noen form for funksjonshemming. Hver besøkende på nettstedene du designer, må kunne finne informasjonen de leter etter, og utføre oppgavene de skal utføre, uansett hva nettsiden eller appen ser ut. Mange forskjellige faktorer som går inn i etableringen av nettsiden eller applikasjonen, kan påvirke tilgjengeligheten.
Du tar den blå pillen - historien slutter, du våkner opp i sengen din og tror hva du vil tro. Du tar den røde pillen - du blir i Wonderland, og jeg viser deg hvor dypt kaninhullet går. - Matrisen
Er du klar til å gå ned på tilgjengelighetskanalen med meg? Vi må dykke inn på de tekniske aspektene på nettsidene. HTML er skjelettet til en webside mens CSS, JavaScript og bilder forbedrer HTML. Ofte mister synskadede mennesker alle disse forbedringene. Selv om tilgjengeligheten hovedsakelig er en utvikleroppgave, vil noen ganger de tekniske kravene som kreves for å bevare eller forbedre tilgjengeligheten, påvirke utseendet til nettstedet. Det betyr at design, kopiering, brukeropplevelse og utvikling alle trenger å samarbeide for å sikre at navigasjonskontroller, skjemaer, knapper, overskrifter, knapper, koblinger og mer er tilgjengelige.
design, kopiering, brukeropplevelse og utvikling trenger alle å samarbeide for å sikre at navigasjonskontroller, skjemaer, knapper, overskrifter, knapper, koblinger og mer er tilgjengelige
Personer som er blind, synskadet, analfabeter eller lærer hjelpemidler for funksjonshemmede for å navigere på Internett. Skjermlesere er den vanligste hjelpeteknologien for Internett. Disse programmene forsøker å tolke det som vises på nettsiden og formidle det til brukeren, vanligvis ved å konvertere teksten til tale, men noen ganger gjennom en Braille-utgangsenhet. Skjermforsterkere brukes også ofte i forbindelse med en skjermleser. Vanligvis vil en skjermleser forsøke å analysere HTML-koden fra toppen av HTML-filen til bunnen og snakke relevante elementer til brukeren. Ideelt sett vil skjermleseren tillate brukeren å vellykket flytte en virtuell markør nedover siden for å fylle ut skjemafelter, klikke på knapper og foreta valg fra rullegardinmenyer og andre kontroller.
For å teste grundig for tilgjengelighet må du sørge for at nettstedet eller appen fungerer bra på hver av de mange skjermleserne som er tilgjengelige. Det finnes flere populære gratis og / eller åpen kildekode-lesere på hver plattform, inkludert KJEVER , og NVDA . Microsoft-brukere kan bruke NVDA, mens Apple-datamaskiner og iOS-enheter kommer med Stemme over som kan forstørre tastaturkontrollene og lese skjerminnholdet, og for Unix-enheter er det Orca . Chrome-nettleseren har to hjelpeteknologi-plugins, ChromeVox for skjermlesing og ChromeVis for forstørrelse.
De fleste webtilgjengelighetsproblemer oppstår når skjermleserens virtuelle markør blir fanget i dårlig utformet form eller hopper over en viktig kontroll eller et viktig stykke tekstinformasjon. Verifisere at nettsteder faktisk er brukbare ligner på nettlesertesting fordi hver skjermleser har forskjellige krav og begrensninger. Derfor er det viktig å forstå oppførselen til hver skjermleser. Behovene til ulike skjermlesere kan innkvarteres ved å legge til forskjellige spesielle HTML-koder til de viktige elementene på siden.
Moderne dynamisk webgrensesnitt kan være spesielt problematisk for tilgjengelighet fordi viktige elementer legges til siden dynamisk ved hjelp av JavaScript. Tilpassede rullegardinmenyer, modaler, verktøytips, trekkspill innhold og dynamiske feil og varsler kan være utfordrende for brukerne av skjermleseren å forstå på grunn av en kommunikasjonsfordeling mellom HTML, JavaScript og skjermleseren. Native HTML og JavaScript har ingen måte å kommunisere siden (Document Object Model) oppdateringer til skjermleserne. Utviklere trenger å flytte "fokus" (skjermleserens virtuelle markør) til den delen av brukergrensesnittet som endret seg. Når en modal åpner opp utviklere må sette brukerens fokus på det modale, slik at skjermleseren kan lese det innholdet og brukeren kan forstå og samhandle med den.
WAI-ARIA kan bygge bro over gapene mellom hva den raske HTML-siden til siden sier og hvilke seende brukere som ser
Dette gjøres gjennom bruk av spesielle HTML-koder kalt WAI-ARIA tags. WAI-ARIA (Accessible Rich Internet Applications) kan bygge bro mellom gapet mellom den rå HTML på siden og hvilke seende brukere som ser ved å tilby en standardisert måte for utviklere å legge til ekstra mening for stater, egenskaper, relasjoner, roller og levende regioner som en skjermleser ville ellers ikke forstå. Utviklere kan bruke aria-nivå for å forklare for skjermleserne hierarkiet for hver overskrift på siden. Med aria-label utviklere kan legge til en overskrift for å beskrive formålet med et diskret element på siden. Dette hjelper utviklere til å opprette klare relasjoner mellom ulike elementer. Utviklere kan også trekke oppmerksomhet til viktige kontroller ved å merke dem med aria-rolletiketter, for eksempel vil en rullegardinmeny bli merket med følgende tag: Aria-har popup: true.
Se pennen Enkeltgjengelige faner av Scott Vinkle ( @svinkle ) på CodePen .
I HTML-koden i eksemplet ovenfor opprettes kategoriene ved hjelp av en uordnet liste med klasser på hvert listeelement. JQuery fanger klikkhendelser når en fane klikkes og legger til 'aria-valgt': 'true' og 'tab-widget__tab-content-active' til den valgte kategorien og skjuler de andre kategoriene ved å legge til 'aria-selected': ' false 'til de resterende fanene. På linje 127 er de første attributtene for kategoriene satt, sammen med disse skjermbildene hjelper skjermleserne til å gjenkjenne hvilken kategori som er synlig. JavaScript på linje 35 legger også til tastaturstøtte til kategoriene. Resten av filen håndterer å fange klikk- og tastaturhendelser slik at jQuery kan legge til «rolle» og «presentasjon» attributter til den valgte fanen.
Aria-tagger kan hjelpe skjermlesere til å tolke tilpassede kontroller som radioknapper når den egendefinerte kontrollen er merket med: Aria-roll = radioknapp. Når et program har et sandkasseområde som kommuniserer tilbakemelding eller oppdateringer til brukeren, kan det bli merket med en live region-tag: Aria-live. Dette sikrer at når teksten på dette elementet endres, vil det automatisk bli snakket med brukeren via skjermleseren.
Sideoppdateringer er en viktig del av nettet for skjermlesere, fordi når en side oppdateres, signalerer den til skjermleseren at den skal kunngjøre den nye siden til brukeren og lese innholdet på siden til brukeren. Dette innebærer at enkelttsidede webapplikasjoner gir spesielle utfordringer for tilgjengelighet. I en enkelt side-app oppdateres ingen full side, slik at skjermleseren og derfor blir brukeren ikke varslet til det oppdaterte innholdet. Resultatet blir at brukeren ikke mottar tilbakemelding på sine handlinger. Den beste løsningen er å etterligne opprørsadferd for opprinnelig side. Ved visning lastet, oppdater sidetittelen og kunngjør den til brukeren.
De fullstendige spesifikasjonene for WAI-ARIA vedlikeholdes av W3 som spesifikasjonene for HTML selv under Web Accessibility Initiative (WAI), men noen ganger kan retningslinjer være mer nyttige enn spesifikasjoner, så her er noen generelle retningslinjer for designere:
Det er flere enkle beslutninger du kan gjøre når du utvikler et nettsted som gjør nettstedet mer tilgjengelig uten å bli for dypt i spesiell tilgjengelighetsmarkering eller skjermleserprøving. Ved å sørge for at HTML-en din formidler mening gjennom strukturen, vil du hjelpe skjermleserne til å behandle informasjon på samme måte som det vises på siden for synete brukere. Dette er viktig for brukere som bruker forstørrelsesglass sammen med en skjermleser.
Ved å bruke riktig HTML-markering for overskrifter, lister, tabeller og andre elementer, kan skjermleseren kategorisere strukturen på siden for brukeren på en kjent måte. For mer involverte oppsett HTML5 gir flere elementer, for eksempel
Vi har gått veldig langt ned dette kaninhullet sammen fordi de potensielle mottakerne av alt dette arbeidet er en bredere gruppe enn du kanskje tror. Hvis du noen gang har prøvd å bruke en mobilapp med den ene hånden fordi den andre hånden bærer noe, hvis du noen gang har prøvd å bruke en mus med din ikke-dominante hånd på grunn av en skade du har blitt situasjonsmessig deaktivert. Og er det ikke fantastisk når fingrene dine er klissete, og du kan fortsatt navigere på et nettsted ved hjelp av et tastatur med knoklene dine? Alle av oss er dessverre utsatt for funksjonshemminger som kommer fra å bli eldre som minnetap, hardt hørsel, forverret syn og begrenset bevegelse.
Strømmen på nettet er i sin universalitet. Tilgang til alle uansett funksjonshemming er et viktig aspekt. - Tim Berners-Lee, W3C direktør og oppfinner av World Wide Web
Utvalgt bilde, tilgjengelighetsbilde via Shutterstock.