Slechtzienden vergroten websites bij het bekijken ervan. Een manier om hieraan tegemoet te komen, is door een responsieve website te maken. Een responsieve website is niet automatisch toegankelijk. Het is wel een stap in de goede richting.
Niet enkel slechtzienden zullen blij zijn met een website die vlot in- en uitzoomt. Ook voor mobiele surfers en mensen die verschillende browsers tegelijkertijd gebruiken is dit nuttig.
Vergrotingstechnieken
WCAG 2.0 stelt dat een website tot 200% vergroot moet kunnen worden. Hoe doen de bezoekers van jouw website dit?
Browser
Elke moderne browser laat gebruikers toe om in- en uit te zoomen. Dit kan door de toetsencombinatie control en +/-, of door de control toets te combineren met het muiswiel. Mobiele browsers gebruiken hiervoor een pinch beweging. Indien de viewport van de browser voldoende klein is, verschijnt de mobiele versie van de website. Je kan gemakkelijk zelf testen hoe jouw website reageert door deze acties zelf uit te voeren.
Hardware
Gebruikers voor wie het browser-eigen zoomen niet voldoende is, kunnen allerhande loepen plaatsen over hun scherm. Deze bestaan voor zowel vaste toestellen als mobiele toestellen. Sommige van deze loepen worden gecombineerd met andere hulpmiddelen, zoals een ingebouwde schermlezer of kleurinvertie.
Software
Desktop
ZoomText en Supernova zijn de twee meest gebruikte vergrotingsprogramma's. Deze software kan het scherm tot wel 64 keer vergroten. Dit zorgt ervoor dat een slechtziende gebruiker werkt met een gefragmenteerd beeld. Slechts een klein deel van het scherm is zichtbaar zonder te scrollen.
Mobile
iOS, Android en Windows bieden vergrotingsopties aan in de toegankelijkheidsopties van hun mobiele toestellen. Ook hebben alledrie text-to-speech functies. De nieuwste update van iOS bevat zowel een voorleesfunctie als VoiceOver (een versie van het besturingssysteem voor blinden). Android gebruikt TalkBack. Windows phones bieden Narrator aan.
Buiten de vergrotingsopties, wordt VoiceOver het meeste gebruikt van deze functionaliteiten. VoiceOver is afhankelijk van de focusvolgorde op je mobiele website. Besteed hier dus voldoende aandacht aan.
Design principes
Zorg ervoor dat je website meeschaalt bij het inzoomen zonder dat er inhoud verloren gaat. Dit kan eenvoudig dankzij media queries en rastergebonden frameworks zoals Bootstrap. De lijst hieronder bevat een aantal belangrijke design principes.
- Gebruik relatieve eenheden als EM en REM in plaats van pixels.
- Zorg voor afbeeldingen die meeschalen (bijvoorbeeld SVG's). Vermijd tekst in afbeeldingen.
- Alle inhoud moet steeds bereikbaar zijn, ongeacht de schermgrootte van de gebruiker. Gebruik daarom geen
overflow: hidden;. - Vermijd horizontaal scrollen zoveel mogelijk. Dit werkt desoriënterend.
- Verbind labels met formuliervelden. Plaats hen visueel dicht bij elkaar. Voeg ook placeholders toe. Indien het label te ver van het veld staat, zal deze buiten het scherm vallen tijdens het inzoomen. Hierdoor moet een gebruiker scrollen om te zien welk label bij welk veld hoort. Dit is desoriënterend.
- Vergeet niet om het hamburgermenu van je website te testen. Dit is een veel voorkomende toetsenbordval. Geef deze een tekstueel alternatief. Zorg ervoor dat het menu bereikbaar is via de tabtoets.
- Een gebruiker moet via een desktop browser tot 200% kunnen inzoomen op uw website. Mobiel moet dit ook mogelijk zijn via de pinch beweging. Schakel de zoomfunctie dus nooit uit, ook niet in je mobiel design.
- Bouw een correcte DOM-volgorde op. Hulptechnologieën extrapoleren hieruit de accessibility tree. Deze bepaalt de volgorde waarin informatie wordt voorgelezen. Gebruik CSS om de visuele weergave van elementen te bepalen.
- Focusvolgorde is op een mobiele website nog steeds van belang. VoiceOver gebruikers zijn tijdens het surfen hiervan afhankelijk. De volgorde waarin zij informatie horen, wordt namelijk bepaald door de focusvolgorde van een pagina.
- Gebruik grote kleurcontrasten. Mobiele surfers hebben vaak last van slechte lichtomstandigheden. Kleurcontrast helpt om uw inhoud leesbaar te houden. Je kan kleurcontrast meten met behulp van de gratis tool Colour Contrast Analyser.
- Wees voorzichtig met ARIA. Vraag hulp indien nodig. Mobiele websites gebruiken doorgaans meer iconen dan hun desktopversie. ARIA is vaak noodzakelijke om deze iconen een tekstalternatief toe te kennen, maar te veel ARIA is even schadelijk als te weinig.
Conclusie
Responsive design speelt een belangrijke rol in webtoegankelijkheid. Zorg ervoor dat je website meeschaalt wanneer een gebruiker in- of uitzoomt. Zo kom je tegemoet aan de noden van slechtziende en mobiele gebruikers. Onthou dat een responsieve website niet automatisch een toegankelijke website is. Daarvoor dient uw website nog steeds te voldoen aan de overige criteria van WCAG 2.0.
Reacties
Reageer als eerste