Share
Met 4,5% van de wereldbevolking die kleurenblindheid ervaart, 4% lijdt aan slechtziendheid en nog eens 0,6% blind is, zijn visuele problemen met het gebruik van het web vaker aanwezig dan u zou kunnen waarderen. Deze handleiding gaat in op hoe ontwerpen voor mensen met een visuele beperking het internet voor iedereen kan verbeteren.
Het internet van vandaag moet voor iedereen toegankelijk worden gemaakt, ongeacht iemands capaciteiten of beperkingen.
"Toegankelijkheid zorgt ervoor dat mensen met een handicap toegang hebben tot dezelfde informatie van een systeem als alle anderen en ook dezelfde voordelen hebben"
Zoals uiteengezet in een vorig artikel bestaat er een breed scala van beperkingen, van vijf opmerkelijke gebieden:
Deze gids zal zich richten op het ontwerpen voor visuele beperkingen, wat vrij algemeen kan zijn, variërend van lichte tot extreme handicaps. Cathy O'Conner (ontwerper en auteur voor Smashing Magazine) schatte dat voor elke twee miljoen online klanten ongeveer 200.000 zouden profiteren van ontwerpen die gemakkelijker te zien zijn.
Dat is een goede schatting, vooral als je bedenkt hoe iemand een verminderd gezichtsvermogen kan ontwikkelen naarmate hij ouder wordt. Veel voorkomende visuele beperkingen kunnen zijn:
Kleurblindheid houdt problemen in waarneming of onderscheid tussen kleuren in, evenals gevoeligheid voor kleurhelderheid. Het beïnvloedt ongeveer 4,5% van de totale wereldbevolking.
Slecht zien kan gedeeltelijk gezichtsvermogen in één of beide ogen omvatten, slechte scherpte (wazig zien), tunnelvisie, centraal veldverlies en vertroebeld zicht. Het treft 246 miljoen mensen, of ongeveer 4% van de wereldbevolking.
Blindheid is het substantiële verlies van het gezichtsvermogen in zowel iemands ogen. Het treft ongeveer 39 miljoen mensen, of 0,6% van de mensen.
De verschillende aard van deze beperkingen kan een grote variatie in de manier waarop webpagina's worden waargenomen door mensen met verschillende visuele mogelijkheden. Zoals hierboven uiteengezet, lijden veel mensen aan visuele beperkingen, dus we moeten ervoor zorgen dat ze alle functies op dezelfde manier kunnen gebruiken en interpreteren.
Bekijk bijvoorbeeld de startpagina van Tumblr, waar de achtergrond van de pagina is ingesteld op een grote afbeelding (gemaakt door hun gebruikers):
De Tumblr-homepageAfhankelijk van het type en niveau van visuele beperking dat een persoon kan hebben, kan de site op verschillende manieren worden waargenomen (hier gesimuleerd met de NoCoffee Chrome-extensie):
1. Perifeer geblokkeerd zicht (bijvoorbeeld glaucoom)
2. Grote vlekken van geblokkeerd zicht (diabetische retinopathie)
3. Verlies van scherpte (wazig zien)
4. Ghosting-problemen
5. Tritanopia kleurenblindheidDe voorbeelden hierboven tonen verschillende soorten slechtziende stoornissen, en ook enkele voorbeelden van kleurenblindheid. Samenvatten:
Vanwege deze variaties in perceptie kunnen belangrijke elementen van een bepaalde website minder toegankelijk (en dus minder bruikbaar) worden, afhankelijk van de mate waarin de visuele handicap van een gebruiker aanwezig is.
Een verlies van gezichtsscherpte (wazig zien) kan bijvoorbeeld de zoekbalk op de Tumblr-website bijna op de achtergrond doen verdwijnen. Hetzelfde kan gezegd worden voor de inlogknop:
Vergelijk de zoekbalk op de afbeelding aan de linkerkant met de rechter aan de rechterkant, de zoekbalk is in de achtergrond gemengd en is nauwelijks zichtbaar.
Neem afstand van het voorbeeld van Tumblr en overweeg een persoon met rood / groene kleurenblindheid (protanopie). Op een pagina met zoekresultaten van Google, de kleur die wordt gebruikt om de huidige pagina met resultaten lijkt minder significant voor een kleurenblinde gebruiker, mogelijk maakt het iets minder zinvol:
Google Protonopia-voorbeeldHet contrast van rood en geel is minder duidelijk voor een kleurenblinde gebruiker en lijkt meer op een lichtgroene kleur tegen een donkergroen.
Beide bovenstaande voorbeelden laten zien hoe variaties in perceptie de bruikbaarheid van kernfuncties kunnen beïnvloeden. Gelukkig kunnen mensen met dergelijke visuele beperkingen de presentatie van inhoud wijzigen, zodat elementen toegankelijker en bruikbaarder voor hen worden. Dit kan gedaan worden door:
Dergelijke aanpassingen kunnen worden aangebracht via standaardinstellingen in een webbrowser. Bovendien zijn meer geavanceerde wijzigingen beschikbaar gemaakt door middel van uitbreidingsmogelijkheden voor browsers. Google heeft bijvoorbeeld verschillende toegankelijkheids-plug-ins gebouwd voor gebruikers met een visuele beperking:
Hoog contrast laat bijvoorbeeld mensen het contrast van een website variëren, waardoor de tekst duidelijker te lezen is. Hier is het in actie op de Spotify-startpagina:
Voorbeeld van een toegankelijkheidsbrowserplug-in die wordt gebruikt om het contrast van een webpagina te wijzigenZoals hierboven te zien, kan de browserextensie:
Met alle verschillende visuele beperkingen, en het grote scala aan hulpmiddelen dat kan worden gebruikt om de weergave van inhoud te wijzigen, wordt duidelijk dat we niet altijd kunnen bepalen hoe webpagina's worden weergegeven of waargenomen door mensen.
Aangezien inhoud op verschillende manieren kan worden weergegeven, moeten we daarom voorzichtig zijn met de manier waarop onze inhoud is gestructureerd, zelfs op coderingsniveau. Dat komt omdat het belangrijk wordt om een duidelijke hiërarchie van informatie te behouden, omdat mensen verschillende manieren kunnen gebruiken om die informatie te presenteren. Laten we nu eens kijken naar enkele praktische tips om ervoor te zorgen dat onze inhoud altijd toegankelijk is, ongeacht hoe deze wordt weergegeven:
Hier is een lijst met zes best practices om uw ontwerpen beter te maken voor mensen met een visuele beperking.
Het is belangrijk dat we ervoor zorgen dat webcontent onafhankelijk is van de onderliggende structuur. Wanneer wijzigingen in de presentatie de grootte van elementen (zoals tekst en afbeeldingen), de afstand tussen elementen of elementen kunnen bevatten (blinde gebruikers kunnen geen afbeeldingen zien), wordt het duidelijk dat de ontwikkelaar niet kan bepalen hoe inhoud op een bepaald moment kan worden bekeken.
Zoals gesteld door de W3C, moeten ontwikkelaars ervoor zorgen dat hun code een structuur biedt die onafhankelijk is van de presentatie om verschillende bladermethoden toe te staan (bijvoorbeeld met behulp van schermlezers of toetsenbordnavigatie):
"Ontwikkelaars moeten ervoor zorgen dat de presentatie van webcontent onafhankelijk is van de onderliggende structuur" - W3C
Een solide structuur biedt ook relevante semantische tags zoals headers, alinea's en lijstitemtags om ervoor te zorgen dat bijvoorbeeld een schermlezer de informatie kan interpreteren en op een andere manier kan presenteren:
Voorbeeld van een website-indeling met behulp van correcte semantische tagsZoals eerder uitgelegd, kunnen bepaalde structurele elementen, vooral afbeeldingen, door sommige gebruikers niet worden waargenomen. Blinden die ondersteunende technologieën gebruiken (zoals schermlezers) om websites te interpreteren zullen bijvoorbeeld de alternatieve tekst toegeschreven aan de afbeelding die wordt uitgelezen, in plaats van feitelijk ziend De afbeelding. Als die tekst niet aanwezig is of niet voldoende beschrijvend is, zullen ze de informatie niet kunnen waarnemen zoals bedoeld.
Hier is een voorbeeld van de Universiteit van Leicester, met nauwkeurige alternatieve tekst, die meer context biedt aan de gebruiker:
Voorbeeld van accuraat alternatief tekstgebruik op een afbeeldingAbility.net biedt vijf gouden regels voor gebruik alt tags (tekstalternatieven) correct om een website toegankelijker te maken:
Accentsconagua
![]()
alt = "" attribuutKleur is niet de beste manier om informatie over te brengen, zoals wordt getoond in het volgende voorbeeld. Hieronder wordt een rode rand gebruikt om formuliervelden te markeren die niet correct zijn ingevuld. Als een gebruiker dus kleurenblind is, kunnen ze deze indicatie niet zien, waardoor het moeilijk wordt om te begrijpen welke velden fouten bevatten:
Het gebruik van pictogrammen en labels om aan te geven welke velden ongeldig zijn, communiceert de informatie beter naar een kleurenblinde gebruiker:
Voorbeeld van Bootstrap v4Dit voorbeeld laat zien dat kleur op zichzelf niet mag worden gebruikt om informatie over te brengen, maar alleen als aanvulling op bestaande informatie.
Kleurenblinde gebruikers kunnen het ook moeilijk vinden om het verschil tussen bepaalde kleuren te bepalen. Bijvoorbeeld, groen, rood en bruin kunnen erg op elkaar lijken:
Hoe kleurenblinde gebruikers groenbruin en rood waarnemen Wanneer kleuren worden gebruikt in diagrammen en grafieken, kan het daarom handig zijn om overlays met patronen in vaste kleuren toe te passen om gebruikers een duidelijkere manier te geven om onderscheid te maken tussen elementen. Dit helpt niet alleen degenen die kleurenblind zijn, maar maakt het ook voor iedereen gemakkelijker. Overweeg Trello's labels voor een voorbeeld van het toepassen van texturen:
Aan de rechterkant, kleurenblindvriendelijke labels van TrelloMonochromatische kleurenschema's maken alleen gebruik van de kleuren van een enkele tint. Hier is een voorbeeld, gemaakt met paletton.com:
Monochroom palet gemaakt met paletton.comDoor alleen tinten van een enkele tint te gebruiken, wordt elke extra betekenis die zou zijn geïntroduceerd door verschillende kleurnuances verwijderd.
Variaties in contrast en tonen kunnen worden gebruikt om betekenis of belang aan elementen te geven en gebruikers aandacht te vragen voor verschillende gebieden. De betekenis hier kan ook gemakkelijker worden overgedragen naar kleurenblinde gebruikers, zoals wordt getoond in het volgende voorbeeld van een monochrome site.
BIGSOUND Buzz is een website die veel gebruik maakt van een monochroom kleurenschema:
Monochrome op BIGSOUND Buzz
Texturen overalEen kleurenblinde gebruiker ziet allemaal dezelfde tonen en contrasten, maar in een andere tint:
BIGSOUND Gezoem voor de kleurenblindenContrast is het verschil tussen de lichtste kleur (bijvoorbeeld de achtergrond) en de donkerste kleur (bijvoorbeeld de tekst). Bekijk bijvoorbeeld deze grafiek voor contrastgevoeligheid:
De linker bovenhoek (letter A) heeft het hoogste contrast en naarmate we naar rechts gaan, neemt het contrast af naarmate het verschil in helderheid tussen achtergrond en voorgrond afneemt. Uiteindelijk kunnen ze, afhankelijk van iemands contrastgevoeligheid, de tekst niet van de achtergrond onderscheiden.
Om ervoor te zorgen dat tekst leesbaar is voor mensen met visuele beperkingen, heeft de WCAG daarom een leidraad voor de contrastverhouding verstrekt. Ze suggereren dat er een contrastverhouding van minimaal 4,5: 1 moet bestaan tussen een tekst en de achtergrond ervan. Deze verhouding zakt naar 3: 1 voor grotere tekst (24px of 29px vetgedrukt).
Een voorbeeld van deze verhouding wordt getoond in de onderstaande voorbeelden, van accessebility.psu.edu:
Over het algemeen verbetert het altijd het eindproduct voor alle anderen door in principe alleen de meest extreme handicaps te ontwerpen.
Bijvoorbeeld ontwerpen voor mensen met geen visie kan een goede basis leggen voor degenen die kan zien. Dit komt omdat het ons in staat stelt om ervoor te zorgen dat de structuur van de website onafhankelijk is van de presentatie en geïnterpreteerd kan worden door ondersteunende technologieën. ook als mensen. Daarom, als presentatiewijzigingen om enige andere reden zouden plaatsvinden, blijft de structuur van de website toegankelijk.
Bovendien is het garanderen dat kleur alleen wordt gebruikt om te benadrukken wat al zichtbaar is, een andere grote stap in de richting van het bouwen van een zeer toegankelijke en daardoor bruikbare website. Een handig ontwerpproces kan daarom zijn om vroege herhalingen van een product in grijstinten te ontwerpen en vervolgens kleuren aan het einde toe te passen.
U hoeft het wiel niet opnieuw uit te vinden bij het maken van toegankelijke ontwerpen; er zijn veel ontwerpsystemen en richtlijnen die u kunnen helpen.
