Wat als ik je webontwerpers zou vertellen dat er mensen zijn die misschien je website bezoeken, het maakt niet uit hoe het eruit ziet?
Mensen met een visuele beperking navigeren door het web om dezelfde redenen die we allemaal doen, om informatie te vinden, om te winkelen en om een groot aantal belangrijke taken uit te voeren met behulp van webgebaseerde applicaties. Mensen met een visuele beperking ervaren het internet echter anders en we moeten gevoelig zijn voor hun behoeften wanneer we websites ontwerpen en bouwen.
Volgens het US Census Bureau en de VN en de Wereldbank hebben meer dan 47 miljoen Amerikanen en 650 miljoen mensen wereldwijd een handicap. Elke bezoeker van de sites die u ontwerpt, moet de informatie kunnen vinden waarnaar hij op zoek is en de taken uitvoeren die hij of zij van plan was uit te voeren, ongeacht hoe de webpagina of app eruit ziet. Veel verschillende factoren die de creatie van de webpagina of applicatie beïnvloeden, kunnen de toegankelijkheid beïnvloeden.
Jij neemt de blauwe pil - het verhaal eindigt, je wordt wakker in je bed en gelooft wat je maar wilt geloven. Je neemt de rode pil - je blijft in Wonderland en ik laat je zien hoe diep het konijnenhol is. - De Matrix
Ben je klaar om met mij de toegankelijkheid van het konijnenhok te verslaan? We zullen een duik moeten nemen in de technische aspecten van webpagina's. HTML is het skelet van een webpagina terwijl CSS, JavaScript en afbeeldingen de HTML verbeteren. Vaak missen visueel gehandicapte mensen al deze verbeteringen. Hoewel toegankelijkheid vooral een ontwikkelaarstaak is, hebben de technische vereisten die vereist zijn om de toegankelijkheid te behouden of te verbeteren, soms invloed op het uiterlijk van de website. Dat betekent dat ontwerp, kopiëren, gebruikerservaring en ontwikkeling allemaal moeten samenwerken om ervoor te zorgen dat navigatiebesturingselementen, formulieren, knoppen, kopjes, knoppen, links en meer toegankelijk zijn.
ontwerp, kopie, gebruikerservaring en ontwikkeling moeten allemaal samenwerken om ervoor te zorgen dat navigatieknoppen, formulieren, knoppen, kopjes, knoppen, links en meer toegankelijk zijn
Mensen die blind zijn, slechtziend, ongeletterd of gehandicapt leren, maken gebruik van ondersteunende technologieën om op internet te navigeren. Schermlezers zijn de meest voorkomende hulptechnologie voor het web. Deze softwareprogramma's proberen te interpreteren wat op de webpagina wordt weergegeven en dragen dit over aan de gebruiker, meestal door de tekst naar spraak te converteren, maar soms via een braille-uitvoerapparaat. Schermvergroters worden ook vaak gebruikt in combinatie met een schermlezer. Meestal probeert een schermlezer de HTML van de bovenkant van het HTML-bestand naar de onderkant te parseren en relevante elementen voor de gebruiker te spreken. Idealiter stelt de schermlezer de gebruiker in staat om met succes een virtuele cursor over de pagina te verplaatsen om formuliervelden in te vullen, op knoppen te klikken en selecties te maken in vervolgkeuzemenu's en andere bedieningselementen.
Om grondig te testen op toegankelijkheid, moet u ervoor zorgen dat de website of app goed presteert op elk van de vele beschikbare schermlezers. Er zijn verschillende populaire gratis en / of open source schermlezers op elk platform inclusief JAWS , en NVDA . Microsoft-gebruikers kunnen NVDA gebruiken, terwijl Apple-computers en iOS-apparaten worden geleverd Voice over die toetsenbordknoppen kan vergroten en scherminhoud kan lezen, en voor Unix-apparaten die er zijn orka . De Chrome-browser heeft twee ondersteunende technologie-plug-ins, ChromeVox voor schermaflezing en ChromeVisual voor vergroting.
De meeste problemen met de toegang tot internet treden op wanneer de virtuele cursor van de schermlezer vast komt te zitten in een slecht ontworpen vorm of overslaat een belangrijk besturingselement of een belangrijk stuk tekstuele informatie. Controleren of websites inderdaad bruikbaar zijn, is vergelijkbaar met browsertests, omdat elke schermlezer andere vereisten en beperkingen heeft. Dit is waarom het begrijpen van het gedrag van elke schermlezer belangrijk is. Aan de behoeften van verschillende schermlezers kan tegemoet worden gekomen door verschillende speciale HTML-tags aan de belangrijke elementen van de pagina toe te voegen.
Moderne dynamische web-UI kan bijzonder problematisch zijn voor toegankelijkheid omdat belangrijke elementen dynamisch aan de pagina worden toegevoegd met behulp van JavaScript. Aangepaste vervolgkeuzemenu's, modaliteiten, tooltips, accordeoninhoud en dynamische fouten en meldingen kunnen voor lezers van schermlezers een uitdaging zijn om te begrijpen vanwege een uitsplitsing van de communicatie tussen de HTML, JavaScript en de schermlezer. Native HTML en JavaScript hebben geen manier om updates voor pagina (Document Object Model) naar de schermlezers te communiceren. Ontwikkelaars moeten de focus (de virtuele cursor van de schermlezer) verplaatsen naar het deel van de gebruikersinterface dat is gewijzigd. Wanneer een modale opening zich voordoet, moeten ontwikkelaars de aandacht van de gebruiker op dat modaal richten, zodat de schermlezer die inhoud kan lezen en de gebruiker het kan begrijpen en ermee kan communiceren.
WAI-ARIA kan de kloof overbruggen tussen wat de onbewerkte HTML van de pagina zegt en wat ziende gebruikers zien
Dit wordt gedaan door het gebruik van speciale HTML-tags genaamd WAI-ARIA -tags. WAI-ARIA (Accessible Rich Internet Applications) kan de kloof overbruggen tussen wat de onbewerkte HTML van de pagina zegt en wat ziende gebruikers zien door ontwikkelaars een gestandaardiseerde manier te bieden om extra betekenis toe te voegen aan staten, eigenschappen, relaties, rollen en live regio's die een schermlezer zou dit anders niet begrijpen. Ontwikkelaars kunnen aria-niveau gebruiken om aan schermlezers de hiërarchie van elke kop op de pagina uit te leggen. Met aria-labelontwikkelaars kan een kop worden toegevoegd om het doel van een afzonderlijk element op de pagina te beschrijven. Dit helpt ontwikkelaars om duidelijke relaties tussen verschillende elementen te creëren. Ontwikkelaars kunnen ook de aandacht vestigen op belangrijke besturingselementen door ze te labelen met aria-role-tags, bijvoorbeeld een vervolgkeuzemenu-knop die wordt gelabeld met de volgende tag: Aria-has popup: true.
Zie de pen Eenvoudige toegankelijke tabbladen door Scott Vinkle ( @svinkle ) aan CodePen .
In de HTML in het bovenstaande voorbeeld worden de tabbladen gemaakt met behulp van een ongeordende lijst met klassen op elk lijstitem. De jQuery legt de klikgebeurtenissen vast wanneer op een tabblad wordt geklikt en voegt 'aria-selected': 'true' en 'tab-widget__tab-content-active' toe aan het geselecteerde tabblad en verbergt de andere tabbladen door 'aria-selected': 'toe te voegen false 'naar de resterende tabbladen. Op regel 127 worden de beginattributen voor de tabbladen ingesteld, samen helpen deze fragmenten schermlezers te herkennen welk tabblad zichtbaar is. Het JavaScript op regel 35 voegt ook toetsenbordondersteuning toe aan de tabbladen. De rest van het bestand behandelt het vastleggen van klik- en toetsenbordgebeurtenissen, zodat jQuery 'rol' en 'presentatie'-kenmerken kan toevoegen aan het momenteel geselecteerde tabblad.
Aria-tags kunnen schermlezers helpen bij het interpreteren van aangepaste besturingselementen als keuzerondjes wanneer het aangepaste besturingselement is gelabeld met: Aria-role = keuzerondje. Wanneer een toepassing een sandbox-gebied heeft dat feedback of updates aan de gebruiker communiceert, kan deze worden gelabeld met een tag voor live-regios: Aria-live. Dit zorgt ervoor dat wanneer de tekst op dit element verandert, deze automatisch via de schermlezer wordt uitgesproken voor de gebruiker.
Paginavernieuwingen vormen een belangrijk onderdeel van het web voor schermlezers, omdat wanneer een pagina wordt vernieuwd, het aan de schermlezer aangeeft dat het de nieuwe pagina aan de gebruiker moet aankondigen en de inhoud van de pagina aan de gebruiker opnieuw moet lezen. Dit betekent dat webtoepassingen met één pagina speciale uitdagingen vormen voor toegankelijkheid. In een app met één pagina wordt er geen volledige pagina vernieuwd, zodat de schermlezer en dus de gebruiker niet op de hoogte worden gebracht van de bijgewerkte inhoud. Het resultaat is dat de gebruiker geen feedback over zijn acties ontvangt. De beste oplossing is om het oorspronkelijke vernieuwingsgedrag van pagina's te emuleren. In weergave geladen laadt u de paginatitel bij en kondigt u deze aan de gebruiker aan.
De volledige specificaties voor WAI-ARIA worden onderhouden door de W3, net als de specificaties voor HTML zelf in het kader van het Web Accessibility Initiative (WAI), maar soms kunnen richtlijnen nuttiger zijn dan specificaties, dus hier volgen enkele algemene richtlijnen voor ontwerpers:
Er zijn verschillende eenvoudige beslissingen die u kunt nemen bij het ontwikkelen van een website die de website toegankelijker zal maken zonder te diep te gaan in speciale toegankelijkheidsmarkeringen of schermlezertests. Door ervoor te zorgen dat uw HTML betekenis doorgeeft via de structuur, helpt u schermlezers informatie te verwerken op dezelfde manier als deze op de pagina wordt weergegeven voor geziene gebruikers. Dit is belangrijk voor gebruikers die een vergrootglas gebruiken in combinatie met een schermlezer.
Door de juiste HTML-markering voor koppen, lijsten, tabellen en andere elementen te gebruiken, kan de schermlezer de structuur van de pagina voor de gebruiker op een vertrouwde manier categoriseren. Voor meer betrokken lay-outs biedt HTML5 aanvullende elementen, zoals
We zijn samen heel ver door dit konijnenhol gegaan omdat de potentiële begunstigden van al dit werk een grotere groep zijn dan je zou denken. Als je ooit geprobeerd hebt om een mobiele app met één hand te gebruiken omdat je andere hand iets draagt, als je ooit een muis hebt geprobeerd te gebruiken met je niet-dominante hand vanwege een blessure, dan ben je situatie-uitgeschakeld. En is het niet geweldig als je vingers plakkerig zijn en je nog steeds op een website kunt navigeren met een toetsenbord met je knokkels? Wij allemaal zijn helaas gevoelig voor de handicaps die het gevolg zijn van ouder worden zoals geheugenverlies, hardhorendheid, verslechterd zicht en beperkte beweging.
De kracht van het web is in zijn universaliteit. Toegang door iedereen ongeacht handicap is een essentieel aspect. - Tim Berners-Lee, W3C-directeur en uitvinder van het World Wide Web
Uitgelichte afbeelding, toegankelijkheidsafbeelding via Shutterstock.