Gids voor Toegankelijkheid op het Web voor Ontwerpers (6 Belangrijke Tips)

Als websiteontwerper speel je een belangrijke rol in de toegankelijkheid van een website en inclusiviteit.  Veel ontwerpelementen, van typografie tot media, kunnen barrières creëren voor mensen met een handicap. Met zoveel zaken die aangepakt moeten worden, kan het voelen als een onmogelijke taak.

Gelukkig is er veel begeleiding beschikbaar voor het ontwerpen van een website die toegankelijk is voor iedereen. Door zorgvuldig aandacht te besteden aan een paar belangrijke gebieden, zou je toegankelijkheid in je ontwerpproces moeten kunnen opnemen zonder je pas te onderbreken.

In deze gids introduceren we je in het concept van webtoegankelijkheid en het belang ervan. Vervolgens behandelen we zes belangrijke punten om rekening mee te houden bij het ontwerpen van een toegankelijke website. Laten we beginnen!

Een Introductie Tot Webtoegankelijkheid

Webtoegankelijkheid betekent dat alle aspecten van een website bruikbaar zijn voor mensen met een beperking. Zonder dit zou veel van de informatie op het internet ontoegankelijk zijn voor een groot deel van de bevolking. Voor online ondernemers zou dit ook betekenen dat ze potentiële verkopen mislopen.

Vanaf 2019 woonde bijna 60% van de Amerikaanse bevolking met een handicap in een huis met internettoegang. Dat betekent dat veel mensen afhankelijk zijn van toegankelijk ontwerp om het web volledig te kunnen gebruiken. Mensen met een beperking hebben ook de neiging om technologie in lagere mate te adopteren, wat betekent dat ze misschien geen keuze hebben welk apparaat te gebruiken bij het bezoeken van een website.

Het World Wide Web Consortium (W3C) heeft de Richtlijnen voor de Toegankelijkheid van Webinhoud (WCAG) ontwikkeld om een set normen te bieden aan ontwikkelaars, ontwerpers en anderen die verantwoordelijk zijn voor het creëren en onderhouden van inhoud op het web.

De toegankelijkheidsrichtlijnen zijn georganiseerd in vier principes, soms aangeduid met het acroniem POUR:

1. Waarneembaar: Websitecomponenten moeten op zodanige wijze worden gepresenteerd dat gebruikers ze kunnen waarnemen, ongeacht een beperking.
2. Bedienbaar: Navigatie en bediening mogen geen invoeracties vereisen die een gebruiker niet kan uitvoeren.
3. Begrijpelijk: Gebruikers moeten begrijpen hoe ze een website en de inhoud ervan kunnen gebruiken en navigeren.
4. Robuust: Inhoud moet compatibel zijn met huidige en toekomstige hulptechnologieën.

Deze principes kunnen overweldigend en zelfs enigszins vaag lijken. Er zijn echter concrete stappen die je kunt nemen om ervoor te zorgen dat je website toegankelijk is voor iedereen.

Webtoegankelijkheidsgids Voor Ontwerpers (6 Belangrijke Tips)

Nadat we hebben besproken hoe essentieel webtoegankelijkheid is, laten we kijken naar zes gebieden die je moet overwegen bij het ontwerpen van een toegankelijke website.

1. Maak Visuele Ontwerpelementen Leesbaar

Typografie is een leuke manier om jouw creatieve flair te tonen, maar het primaire doel van de tekst op je website is het overbrengen van informatie. Er zijn een paar richtlijnen waar je rekening mee moet houden bij het werken met typografie.

Eerst wil je nadenken over het contrast tussen de tekst en de achtergrond. Contrast wordt uitgedrukt als een verhouding, en volgens de WCAG-richtlijnen is het minimale contrast 4.5:1 voor normale tekst en 3:1 voor grote tekst.

Er zijn verschillende hulpmiddelen die je kunt gebruiken om kleurencombinaties te testen. WebAIM’s Contrast Checker is een van deze.

Regelhoogte en letterafstand zijn ook belangrijk voor toegankelijkheid. Om tekst leesbaar te houden, geeft W3C de volgende richtlijnen:

• Regelhoogte moet minimaal 1,5 keer de lettergrootte zijn.
• Afstand tussen alinea’s moet twee keer de lettergrootte zijn.
• Afstand tussen letters moet minimaal 0,12 keer de lettergrootte zijn.
• Woordafstand moet minimaal 0,16 keer de lettergrootte zijn.

Grafieken zijn een andere manier om veel informatie te presenteren in een gemakkelijk te begrijpen formaat. Als je echter alleen de elementen onderscheidt op basis van kleur, kun je veel mensen tekort doen. Er zijn namelijk ongeveer 3 miljoen kleurenblinde mensen wereldwijd die moeite kunnen hebben met jouw inhoud.

Om ervoor te zorgen dat visuele elementen begrijpelijk zijn, overweeg om naast kleur ook patronen in je grafieken te gebruiken. Bij het selecteren van ontwerpen raden we aan om te kiezen voor ontwerpen die voldoende van elkaar verschillen. Bijvoorbeeld, lijnen of stippen zijn gemakkelijk te onderscheiden, terwijl lijnen van verschillende diktes dat mogelijk niet zijn.

2. Organiseer Inhoud Voor Gemakkelijk Begrip

Wat voor type website je ook ontwerpt, de kans is groot dat er veel tekst is. Je kunt toegankelijkheid verbeteren door inhoud te structureren op een manier die makkelijk te scannen en te begrijpen is.

Ten eerste zullen de meeste gebruikers het waarderen als je jouw tekst opdeelt in korte alinea’s. Mensen lezen vaak niet diepgaand op het internet, en kortere secties zijn gemakkelijker om doorheen te scannen.

Koppen zijn ook cruciaal voor de scanbaarheid. Elke kop moet de inhoud eronder nauwkeurig beschrijven en een logische hiërarchie volgen. Dit betekent dat je begint met grotere koppen en progressief kleinere gebruikt naarmate je meer specifieke informatie behandelt.

Het gebruik van geschikte opmaak voor je koppen kan het makkelijker maken voor schermlezers om je inhoud te lezen en te navigeren. In HyperText Markup Language (HTML) gebruik je tags <h1> tot <h6> om hiërarchische koppen te maken om je tekst op te delen.

Wanneer je links toevoegt aan je inhoud, zorg ervoor dat de ankertekst beschrijvend genoeg is zodat lezers weten waar een klik hen naartoe brengt. Het is ook slim om te vermelden als de link in een nieuw venster wordt geopend. Een onverwacht openend venster kan problemen veroorzaken voor schermlezers en de gebruiker in verwarring brengen.

Je zou je gebruikers ook moeten laten navigeren door de inhoud zonder een scrollwiel te gebruiken of herhaaldelijk op een pijltoets te drukken. Dit kan zo eenvoudig zijn als het opnemen van een inhoudsopgave aan het begin van een blogpost. Je kunt ook een knop hebben die direct naar de hoofdinhoud van de pagina gaat.

Hierna zullen we enkele manieren verkennen waarop je de interactie met je website gemakkelijker kunt maken.

3. Zorg Dat Gebruikersinterface (UI) Elementen Intuïtief en Apparaatonafhankelijk Zijn

Gebruikersinterface (UI) elementen zijn alles op een website waarmee bezoekers moeten interageren om te navigeren, en ze spelen een belangrijke rol in de algehele Gebruikerservaring (UX). UI-elementen kunnen onder meer schuifbalken, dropdownmenu’s en meldingen omvatten.

Voor een website om als toegankelijk beschouwd te worden, moeten mensen die verschillende apparaten gebruiken succesvol kunnen interageren met deze UI-elementen. Dit betekent dat een apparaatonafhankelijk ontwerp cruciaal is.

Bijvoorbeeld, sommige mensen kunnen alleen toetsenborden gebruiken. Om het voor hen mogelijk te maken om een webpagina te navigeren, kun je focusindicatoren opnemen om knoppen, links en tekstvelden te markeren wanneer een gebruiker door een pagina tabt.

Alles op je website waarmee interactie mogelijk is, moet een overeenkomstige focusindicator hebben. Het uiterlijk kan verschillen van de ene naar de andere browser, maar ze verschijnen meestal als een blauwe of witte omtrek, afhankelijk van de achtergrondkleur.

Wanneer je focusindicatoren toevoegt, moet je de tabvolgorde definiëren. Deze volgorde zou vergelijkbaar moeten zijn met hoe je leest: van boven naar beneden en van links naar rechts. Je kunt dit testen door door je site te tabben.

Probeer navigatie en andere menu’s in een consistente volgorde te houden door de hele website. Deze elementen moeten ook ongeveer op dezelfde locaties op elke pagina verschijnen omdat dit ze makkelijker te onthouden en sneller te gebruiken maakt.

Aanraakdoelen zijn de gebieden waar een gebruiker op tikt bij het gebruik van een touchscreenapparaat. Wanneer je aanraakdoelen definieert, moet je ervoor zorgen dat ze groot genoeg zijn om gemakkelijk aangetikt te kunnen worden door iedereen. Mensen met neuromusculaire aandoeningen hebben bijvoorbeeld mogelijk niet de fijne motoriek die nodig is om met een klein doel te interacteren.

Echter, je wilt ook geen doelen zo groot maken dat ze overlappen met nabijgelegen elementen. Het aantikken van één knop terwijl je voor een andere ging, is genoeg om iedereen te frustreren.

Sommige gebruikers vertrouwen sterk op sneltoetsen. Hoewel je sneltoetsen voor je website kunt definiëren, is dit misschien niet de beste aanpak. Sneltoetsen zijn niet gestandaardiseerd op het web, en degene die je creëert kunnen conflicteren met het apparaat dat iemand gebruikt. Als je besluit om aangepaste sneltoetsen toe te voegen, zorg er dan voor dat dit duidelijk is en geef begeleiding voor het gebruik ervan.

Er zijn bepaalde interacties die niet op elk apparaat beschikbaar zijn. Bijvoorbeeld, hoewel knijpen om te zoomen handig is voor mobiele telefoons, is het onmogelijk op elke computer zonder touchscreen. Zorg ervoor dat inhoud niet achter acties verborgen blijft die jouw gebruikers misschien niet kunnen uitvoeren. Bied meerdere wegen naar je informatie.

UX is een zeer betrokken gebied van webdesign met veel bewegende onderdelen. Daarom kun je overwegen om een sectie toe te voegen aan je stijlgids om consistentie te behouden voor alle UI-elementen op je website.

4. Maak Invoercontroles Gebruiksvriendelijk

Invoercontroles zijn een subset van UI-elementen bedoeld om invoer van een gebruiker te accepteren. Voorbeelden hiervan zijn tekstvelden, selectievakjes en keuzerondjes.

Formulieren kunnen lastig te ontwerpen zijn met toegankelijkheid in gedachten, maar er zijn enkele richtlijnen te volgen. Je kunt beginnen met het labelen van elk veld van je formulier. Je zou ook wat voorbeeldtekst in het veld zelf kunnen opnemen.

Bij het ontwerpen van formulieren raden we aan om een verticale structuur te gebruiken en elk veld op een eigen regel te plaatsen. Dit maakt het navigeren door het formulier gemakkelijker voor gebruikers die alleen een toetsenbord gebruiken. Zorg daarnaast dat focusindicatoren door het hele formulier zijn geplaatst.

Je kunt lange formulieren opsplitsen in meerdere secties omdat ze overweldigend kunnen zijn. Je kunt ook een voortgangsbalk toevoegen zodat mensen weten waar ze zich in het proces bevinden; dit wordt waarschijnlijk gewaardeerd door je gebruikers.

Zorg er ten slotte voor dat je foutmeldingen geeft die duidelijk en gemakkelijk te begrijpen zijn. Indien mogelijk, maak niet het hele formulier leeg wanneer er een fout wordt gemaakt. Het is een goed idee om instructies toe te voegen over hoe de fout te herstellen.

5. Bied Verschillende Manieren Om Media Te Genieten

Media kunnen veel toevoegen aan een website, maar er zijn toegankelijkheidsproblemen waar je rekening mee moet houden. Gelukkig kun je ervoor zorgen dat alle media die je gebruikt door iedereen gewaardeerd worden.

Eerst zijn sommige soorten media beter helemaal te vermijden. Knipperende animaties of pop-ups kunnen mogelijk aanvallen uitlokken bij sommige mensen. Je wilt misschien ook scrollende tekst of geanimeerde inhoud die niet gepauzeerd kan worden overslaan. Het kan moeilijk of zelfs onmogelijk zijn voor sommige gebruikers om dit te verwerken.

Als je de behoefte voelt om scrollen of animatie toe te voegen, zijn er manieren om deze elementen toegankelijker te maken. Zorg ervoor dat tekst langzaam genoeg beweegt zodat bezoekers het gemakkelijk kunnen lezen. Bovendien, maak het mogelijk voor gebruikers om de inhoud te pauzeren en wees duidelijk over hoe dit te doen.

Wanneer je videocontent maakt voor je website, kun je ondertiteling toevoegen voor doven en slechthorenden. Je moet ook een teksttranscript van de inhoud van de video toevoegen voor degenen die een schermlezer gebruiken.

Bezoekers die schermlezers gebruiken, kunnen soms ook moeite hebben met afbeeldingen op een site. Om het voor deze mensen mogelijk te maken om te zien wat er in een afbeelding gebeurt, kun je alt-tekst toevoegen.

Alt-tekst is een beschrijving bedoeld om te verschijnen wanneer een afbeelding niet laadt. Echter, schermlezers spreken ook deze tekst uit, zodat mensen met een visuele beperking niets missen.

Wanneer je alt-tekst schrijft, wil je zo beschrijvend mogelijk zijn. Je kunt je beschrijving baseren op wat er in de afbeelding te zien is en de context van de omringende inhoud. Ook is het niet nodig om de woorden “Afbeelding van…” aan het begin van je alt-tekst toe te voegen, omdat de schermlezer dat automatisch toevoegt.

6. Voer Gebruikersonderzoek En Testen Uit

Gebruikersonderzoek en tests zijn waarschijnlijk niet zo spannend voor je als het ontwerpproces, maar ze zijn cruciaal voor het perfect afstemmen van toegankelijkheid. Gebruikersonderzoek kan het beste vroeg in het proces worden gedaan om een goed beeld te krijgen van wie je gebruikers zijn en wat ze van je verwachten. Je kunt gedurende het ontwerpproces tests uitvoeren om je op de goede weg te houden.

Grondig onderzoek zorgt ervoor dat geen van je gebruikers tussen wal en schip valt en zal je helpen een plan te ontwikkelen voor het ontwerpen van je website. Je kunt focusgroepen of enquêtes gebruiken om te bepalen wat gebruikers nodig hebben van je website en hoe ze deze van plan zijn te gebruiken.

Je wilt waarschijnlijk wat tests uitvoeren tijdens het bouwen van de site. Je zou kunnen proberen A/B testing in de wireframing-fase, wanneer er nog tijd is om van richting te veranderen. Zodra je site live gaat, zou je mensen kunnen observeren terwijl ze je website gebruiken en hun gedachten vragen terwijl ze specifieke taken uitvoeren.

Tijdens onderzoek en tests is het het beste om een diverse groep deelnemers te verzamelen. Als je mensen met allerlei vaardigheden betrekt, heb je een betere kans om een site te ontwerpen die voor iedereen werkt.

Je kunt ook zelf tests uitvoeren, zoals proberen je website alleen met je toetsenbord te navigeren. Voor andere elementen van toegankelijkheid wil je misschien een plugin zoals WP Accessibility proberen.

Deze plugin is gratis te gebruiken. Het kan je helpen om een verscheidenheid aan toegankelijkheidsproblemen op te lossen.

Laten We Toegankelijkheid Standaard Maken

Focussen op toegankelijkheid tijdens het ontwerpproces kan resulteren in een website die voor iedereen toegankelijk is. Hoewel het misschien veel lijkt om bij te houden, is de beloning de extra inspanning zeker waard.

Houd het volgende in gedachten wanneer je jouw website ontwerpt:

1. Maak visuele ontwerpelementen leesbaar.
2. Organiseer webinhoud voor gemakkelijk begrip.
3. Houd gebruikersinterface (UI) elementen intuïtief en apparaatonafhankelijk.
4. Maak invoercontroles gebruiksvriendelijk.
5. Voeg meerdere manieren toe om van media te genieten.
6. Voer gebruikersonderzoek en toegankelijkheidstests uit.

Een toegankelijke website bouwen is een stuk eenvoudiger met de juiste webhost aan je zijde. DreamHost’s Shared Unlimited hosting kan ervoor zorgen dat je een geweldige start maakt met een snelle en betrouwbare website!