Hvad hvis jeg fortalte dig webdesignere derude, at der er mennesker, der måske besøger dit websted, der er ligeglade med, hvordan det ser ud?
Synshandicappede mennesker navigerer på nettet af de samme grunde, som vi alle gør, for at finde information, til at shoppe og udføre et utal af vigtige opgaver ved brug af web-baserede applikationer. Men synshandicappede oplever internettet anderledes, og vi skal være følsomme over for deres behov, når vi designer og bygger websites.
Ifølge US Census Bureau og FN og Verdensbanken har over 47 millioner amerikanere, og op til 650 millioner mennesker over hele verden, en form for handicap. Hver besøgende på de websteder, du designer, skal kunne finde de oplysninger, de leder efter, og udføre de opgaver, de har til hensigt at udføre, uanset hvad websiden eller appen ser ud. En masse forskellige faktorer, der går ind i oprettelsen af websiden eller applikationen, kan påvirke tilgængeligheden.
Du tager den blå pille - historien slutter, du vågner op i din seng og tror, hvad du vil tro. Du tager den røde pille - du bliver i Wonderland, og jeg viser dig, hvor dybt kaninhullet går. - Matrixen
Er du klar til at gå ned på tilgængeligheden kanin holde med mig? Vi bliver nødt til at dykke ind på de tekniske aspekter af websider. HTML er skeletet på en webside, mens CSS, JavaScript og billeder forbedrer HTML'en. Ofte går synshandicappede mennesker glip af alle disse forbedringer. Selv om tilgængelighed er hovedsagelig en udvikleropgave, vil nogle gange de tekniske krav, der kræves for at bevare eller forbedre tilgængeligheden, påvirke udseendet af hjemmesiden. Det betyder, at design, kopi, brugeroplevelse og udvikling alle skal samarbejdes for at sikre, at navigationskontrol, formularer, knapper, overskrifter, knapper, links og mere er tilgængelige.
design, kopi, brugeroplevelse og udvikling skal alle samarbejdes for at sikre, at navigationskontrol, formularer, knapper, overskrifter, knapper, links og mere er tilgængelige
Personer, der er blinde, synskadede, analfabeter eller lærer hjælpemidler til handicappede til at navigere på internettet. Skærmlæsere er den mest almindelige hjælpeteknologi til internettet. Disse softwareprogrammer forsøger at fortolke, hvad der vises på websiden og formidle det til brugeren, normalt ved at konvertere teksten til tale, men nogle gange gennem en Braille-udgangsenhed. Skærmforstærkere bruges også ofte i forbindelse med en skærmlæser. Typisk vil en skærmlæser forsøge at analysere HTML'en fra toppen af HTML-filen til bunden og tale relevante elementer til brugeren. Ideelt set giver skærmlæseren brugeren mulighed for at bevæge en virtuel markør ned på siden for at udfylde formularfelter, klikke på knapper og foretage valg fra rullemenuer og andre kontroller.
For at teste grundigt for tilgængelighed skal du sørge for, at hjemmesiden eller appen fungerer godt på hver af de mange skærmlæsere, der er tilgængelige. Der er flere populære gratis og / eller open source skærmlæsere på hver platform, herunder JAWS , og NVDA . Microsoft-brugere kan bruge NVDA, mens Apple-computere og iOS-enheder kommer med Voice over som kan forstørre tastaturkontrol og læse skærmindhold, og for Unix-enheder er der Orca . Chrome-browseren har to hjælpeprogrammer, ChromeVox til skærmlæsning og ChromeVis til forstørrelse.
De fleste webadgangsproblemer opstår, når skærmlæserens virtuelle markør bliver fanget i en dårligt designet form eller springer over en vigtig kontrol eller et vigtigt stykke tekstlig information. At verificere, at websteder rent faktisk er brugbare, ligner browserprøvning, fordi hver skærmlæser har forskellige krav og begrænsninger. Det er derfor vigtigt at forstå hver skærmlæser adfærd. Behovene hos forskellige skærmlæsere kan indkvarteres ved at tilføje forskellige specielle HTML-tags til de vigtige elementer på siden.
Moderne dynamiske web-brugergrænseflade kan være særlig problematisk for tilgængelighed, fordi vigtige elementer tilføjes til siden dynamisk ved hjælp af JavaScript. Brugerdefinerede rullemenuer, modeller, værktøjstip, harmonikaindhold og dynamiske fejl og meddelelser kan være udfordrende for brugerne af skærmlæserne at forstå på grund af en kommunikationsfordeling mellem HTML, JavaScript og skærmlæseren. Native HTML og JavaScript har ingen måde at kommunikere side (Document Object Model) opdateringer til skærmens læsere. Udviklere skal flytte "fokus" (skærmlæserens virtuelle markør) til den del af brugergrænsefladen, der ændres. Når en modal åbner op, skal udviklerne sætte brugerens fokus på den modale, så skærmlæseren kan læse det indhold og brugeren kan forstå og interagere med det.
WAI-ARIA kan bygge bro mellem hullerne mellem, hvad den raske HTML på siden siger, og hvilke seende brugere der ser
Dette gøres ved brug af specielle HTML-tags kaldet WAI-ARIA tags. WAI-ARIA (Accessible Rich Internet Applications) kan overbygge hullerne mellem, hvad den rå HTML på siden siger, og hvilke syne brugere ser ved at give en standardiseret måde for udviklere at tilføje ekstra mening til stater, egenskaber, relationer, roller og live-regioner, der en skærmlæser ellers ville ikke forstå. Udviklere kan bruge aria-niveau til at forklare for skærmlæsere hierarkiet for hver overskrift på siden. Med aria-label-udviklere kan der tilføjes en overskrift for at beskrive formålet med et diskret element på siden. Dette hjælper udviklere med at skabe klare relationer mellem forskellige elementer. Udviklere kan også henlede opmærksomheden på vigtige kontroller ved at mærke dem med aria-roll tags, for eksempel en drop-down menu knap vil blive mærket med følgende tag: Aria-har popup: true.
Se pennen Enkelt tilgængelige faner af Scott Vinkle ( @svinkle ) på CodePen .
I HTML'en i eksemplet ovenfor oprettes fanerne ved hjælp af en uordnet liste med klasser på hver liste element. JQuery fanger klikhændelserne, når en fane klikkes og tilføjer 'aria-selected': 'true' og 'tab-widget__tab-content-active' til den valgte fane og gemmer de andre faner ved at tilføje 'aria-selected': ' falsk 'til de resterende faner. På linje 127 indstilles de oprindelige attributter for fanerne, sammen med disse skabeloner hjælper skærmlæsere med at genkende hvilken fane der er synlig. JavaScript på linje 35 tilføjer også tastaturstøtte til fanerne. Resten af filen håndterer at fange klik og tastaturhændelser, så jQuery kan tilføje attributter "rolle" og "præsentation" til den aktuelt valgte fane.
Aria tags kan hjælpe skærmlæsere til at fortolke brugerdefinerede kontroller som radioknapper, når den brugerdefinerede kontrol er mærket med: Aria-roll = radioknap. Når en applikation har et sandkasseområde, der kommunikerer feedback eller opdateringer til brugeren, kan det mærkes med et live-region-tag: Aria-live. Dette sikrer, at når teksten på dette element ændres, bliver det automatisk talt med brugeren gennem skærmlæseren.
Sideopdateringer er en vigtig del af internettet for skærmlæsere, fordi når en side opdateres, signalerer den til skærmlæseren, at den skal annoncere den nye side til brugeren og genlæse indholdet på siden til brugeren. Det betyder, at websider med en enkelt side udgør særlige udfordringer for tilgængelighed. I en enkelt side-app opdateres ingen fuld side, så skærmlæseren og dermed brugeren bliver ikke opmærksom på det opdaterede indhold. Resultatet bliver, at brugeren ikke modtager nogen feedback om deres handlinger. Den bedste løsning er at efterligne indfødt sideopdateringsadfærd. Opdateret sidetitel og annoncer det til brugeren under visning.
De fulde specifikationer for WAI-ARIA opretholdes af W3 som specifikationerne for HTML selv under Web Accessibility Initiative (WAI), men nogle gange kan retningslinjer være mere nyttige end specifikationer, så her er et par generelle retningslinjer for designere:
Der er flere enkle beslutninger, du kan gøre, når du udvikler en hjemmeside, der gør hjemmesiden mere tilgængelig uden at blive for dybt i særlig tilgængelighed markup eller screen reader testning. Ved at sikre, at din HTML formidler mening gennem sin struktur, hjælper du skærmlæsere med at behandle oplysninger på samme måde som den vises på siden for synlige brugere. Dette er vigtigt for brugere, der bruger en forstørrelse sammen med en skærmlæser.
Brug af passende HTML-markering for overskrifter, lister, tabeller og andre elementer gør det muligt for skærmlæseren at kategorisere sidens struktur for brugeren på en velkendt måde. For mere involverede layouts giver HTML5 yderligere elementer, f.eks
Vi har gået meget langt ned på dette kaninhul sammen, fordi de potentielle modtagere af alt dette arbejde er en bredere gruppe end du måske tror. Hvis du nogensinde har forsøgt at bruge en mobilapp med den ene hånd, fordi din anden hånd bærer noget, hvis du nogensinde har forsøgt at bruge en mus med din ikke-dominerende hånd på grund af en skade, du har været situationsmæssigt deaktiveret. Og er det ikke dejligt, når dine fingre er klæbrige, og du kan stadig navigere på et websted ved hjælp af et tastatur med dine knogler? Vi alle er desværre modtagelige for de handicap, der kommer fra at blive ældre som hukommelsestab, hardhørelse, forværret syn og begrænset bevægelse.
Webens magt er i sin universalitet. Adgang fra alle uanset handicap er et væsentligt aspekt. - Tim Berners-Lee, W3C direktør og opfinder af World Wide Web
Fremhævet billede, tilgængelighed billede via Shutterstock.