Hoe Ontwerp Je Een Toegankelijke Website (Een Complete Gids)

Of je nu een e-commerce site beheert of een webontwikkelingsbedrijf, je wilt zoveel mogelijk bezoekers naar je website trekken. En dat betekent zorgen dat zoveel mogelijk mensen je site kunnen gebruiken – door het prioriteren van website-toegankelijkheid.

Website toegankelijkheid betreft ervoor zorgen dat jouw site bruikbaar is voor iedereen, inclusief degenen met beperkingen en handicaps. Er zijn diverse bronnen, hulpmiddelen en tips die je kunt benutten om het creëren van een inclusieve website een stuk eenvoudiger te maken.

In deze post behandelen we alles wat je moet weten over website-toegankelijkheid: waarom het zo belangrijk is, hoe je de huidige toegankelijkheidsniveaus (en barrières) van je site kunt controleren, en een complete gids voor het ontwerpen van zeer toegankelijke webpagina’s. Begin nu!

Wat Is Website Toegankelijkheid?

Website-toegankelijkheid verwijst naar de mate waarin een site gebruikt kan worden door personen met een handicap. Dit kan mensen omvatten die blind zijn of een slecht zicht hebben, doven of slechthorenden, personen met mobiliteitsbeperkingen, cognitieve beperkingen en andere handicaps. Het betreft het ontwerpen van je website zodat de inhoud beschikbaar en functioneel is voor iedereen, inclusief degenen die mogelijk ondersteunende technologieën zoals schermlezers, spraakherkenningssoftware of gespecialiseerde invoerapparaten gebruiken.

Dit idee gaat verder dan alleen het helpen van individuen. Het gaat over het omarmen van de diversiteit van webgebruikers en het erkennen van het belang van gelijke toegang op het internet. Door toegankelijkheid te prioriteren, breid je niet alleen je publiek uit, maar bevorder je ook inclusiviteit en maatschappelijke verantwoordelijkheid.

Website toegankelijkheid sluit ook aan bij verschillende wettelijke normen, zoals de Americans with Disabilities Act (ADA) in de Verenigde Staten en vergelijkbare wetgeving wereldwijd. Deze wetten vereisen dat bepaalde websites, vooral die van openbare instellingen en bedrijven, toegankelijk zijn voor mensen met een handicap om discriminatie te voorkomen.

Wie Beheert En Handhaaft De Toegankelijkheidsregels En -wetten Voor Websites?

De verantwoordelijkheid voor het beheren en handhaven van de regels en wetten voor website-toegankelijkheid wordt gedeeld door verschillende overheids- en niet-overheidsorganisaties, die elk een belangrijke rol spelen bij het vaststellen en handhaven van de toegankelijkheidsnormen die we later in dit artikel zullen behandelen.

• Overheden en overheidsinstanties. In de Verenigde Staten is het Ministerie van Justitie (DOJ) voornamelijk verantwoordelijk voor de handhaving van de ADA, die regels omvat voor de toegankelijkheid van websites. Andere landen hebben hun eigen overheidsorganen die soortgelijke wetten en regelgevingen overzien.
• Internationale standaardenorganisaties. Het World Wide Web Consortium (W3C) heeft de Web Content Accessibility Guidelines (WCAG) ontwikkeld, een reeks internationaal erkende standaarden die uitleggen hoe webinhoud toegankelijker gemaakt kan worden voor mensen met een handicap. Deze richtlijnen worden algemeen aanvaard als de benchmark voor webtoegankelijkheid en worden vaak aangehaald in wettelijke vereisten.
• Belangenorganisaties en NGO’s. Non-profitorganisaties en belangenorganisaties bevorderen actief de toegankelijkheid van websites, vaak door middel van het aanbieden van bronnen, het uitvoeren van audits en soms door juridische stappen te ondernemen tegen websites die niet aan de normen voldoen.
• Rechtssysteem. Het rechtssysteem raakt vaak betrokken bij gevallen van niet-naleving van wetten op het gebied van webtoegankelijkheid. Rechtszaken en juridische acties kunnen worden ondernomen tegen organisaties die niet voldoen aan de vereiste normen, in het bijzonder onder de ADA. Juridische procedures kunnen belangrijke precedenten scheppen die toekomstige normen voor de handhaving van toegankelijkheidsregels vaststellen.

Het is belangrijk om te benadrukken dat het landschap van webtoegankelijkheid voortdurend in ontwikkeling is. We hebben allemaal een gedeelde verantwoordelijkheid om op de hoogte te blijven van het laatste nieuws, juridische ontwikkelingen en andere veranderingen die websitebeheerders beïnvloeden.

Wat Zijn Webtoegankelijkheidsnormen?

Volgens de WCAG zijn er vier principes die je moet volgen bij het maken van een toegankelijke website. Ze zeggen dat je site moet zijn:

• Waarneembaar. Bezoekers moeten in staat zijn om de inhoud en informatie op je site te kunnen waarnemen, begrijpen en ervan op de hoogte te zijn. Bijvoorbeeld, toegang hebben tot alt-tekst.
• Bedienbaar. Bezoekers moeten elk deel van je site kunnen gebruiken zonder onderbrekingen. Een goed ingedeeld en georganiseerd navigatiemenu kan dit bereiken.
• Begrijpelijk. Alle inhoud op je site, of het nu geschreven is of anders gepresenteerd, moet gemakkelijk te begrijpen zijn. Duidelijke, beknopte taal en overzichtelijke, oncluttered pagina’s kunnen worden gebruikt om informatie te communiceren.
• Robuust. De basis van je site, zoals de HTML-code, moet gemakkelijk te lezen en te interpreteren zijn door alle bezoekers, inclusief ondersteunende technologieën zoals schermlezers. Een ander voorbeeld hiervan is het optimaliseren van je website voor verschillende apparaten zoals telefoons en tablets.

Voorbeelden Van Toegankelijkheidsbarrières Online

Deze veelvoorkomende obstakels kunnen voorkomen dat gebruikers met een handicap toegang krijgen tot of kunnen interageren met een website. Hier zijn enkele voorbeelden van obstakels en hoe ze gebruikers beïnvloeden.

• Gebrek aan alt-tekst voor afbeeldingen. Als afbeeldingen op een website geen alternatieve tekst (alt-tekst) hebben, kunnen schermlezers die door visueel beperkte gebruikers worden gebruikt niet interpreteren waar de afbeelding over gaat. Dit kan leiden tot een gebrek aan begrip of het missen van cruciale informatie.
• Onvoldoende toetsenbordnavigatie. Veel gebruikers met motorische beperkingen zijn afhankelijk van toetsenbordnavigatie in plaats van een muis. Websites die geen ondersteuning bieden voor toetsenbordnavigatie of complexe lay-outs hebben, kunnen ontoegankelijk zijn voor deze gebruikers.
• Slecht kleurcontrast. Onvoldoende contrast tussen tekst- en achtergrondkleuren kan de inhoud moeilijk leesbaar maken voor gebruikers met visuele beperkingen, inclusief kleurenblindheid. Dit kan teksten praktisch onzichtbaar maken voor sommige gebruikers.
• Onbeschrijvende linktekst. Het gebruik van vage uitdrukkingen zoals “klik hier” voor linktekst biedt niet genoeg informatie over de bestemming van de link, vooral voor gebruikers van schermlezers die mogelijk links uit de context doorbladeren.
• Gebrek aan ondertiteling of transcripties voor audio- en video-inhoud. Gebruikers die doof of slechthorend zijn, zijn afhankelijk van ondertitels of transcripties voor audio- en video-inhoud. Zonder deze kunnen ze cruciale informatie missen.
• Complex en inconsistent navigeren. Inconsistente of overdreven complexe website-navigatie kan verwarrend zijn, met name voor gebruikers met cognitieve beperkingen. Eenvoudige, voorspelbare en consistente navigatie bevordert een beter begrip en gebruiksgemak.
• Tijdgebonden inhoud en interacties. Inhoud die verdwijnt na een bepaalde tijd of snelle interactie vereist, kan een barrière vormen voor gebruikers met cognitieve of motorische beperkingen die mogelijk meer tijd nodig hebben om te lezen of om te interageren met de inhoud.
• Gebruik van vaktaal of complexe taal. Overmatig complexe taal of vakjargon kan een aanzienlijke barrière vormen voor gebruikers met cognitieve beperkingen of voor degenen die de taal van de website niet als moedertaal spreken.

Waarom Je Toegankelijkheid Van Websites Voorrang Moet Geven

De Wereldgezondheidsorganisatie (WHO) schat dat 15% van de wereldbevolking — zo’n één miljard mensen — leeft met een handicap. De percentages van handicaps nemen toe naarmate de levensduur toeneemt, waardoor chronische gezondheidsproblemen stijgen. Mensen met een handicap verdienen het om dezelfde informatie te kunnen benaderen als diegenen zonder handicap, en daarom is het zo belangrijk dat we allemaal samenwerken om digitale inhoud toegankelijk te maken en barrières voor toegankelijkheid online te verwijderen.

Als website-eigenaar is het belangrijk om ervoor te zorgen dat je mensen met een beperking niet uitsluit — zelfs niet onbedoeld. De ADA is een burgerrechtenwet die bedrijven en organisaties verbiedt te discrimineren op basis van handicap, dus als je website niet voor iedereen toegankelijk is, kan dat je in juridische problemen brengen! Maar juridische naleving is niet de enige reden waarom toegankelijkheid een topprioriteit zou moeten zijn bij het ontwerpen van je site.

Je website toegankelijk maken zendt een boodschap uit dat jouw bedrijf inclusieve waarden heeft, en studies hebben aangetoond dat bedrijven die diverser en inclusiever zijn tot 35% meer kans hebben op financiële rendementen boven hun branchegemiddelde.

En hoewel toegankelijk webdesign mensen met een beperking in staat stelt om gemakkelijk te navigeren op je site, bevat het ontwerpprincipes die de gebruikerservaring voor alle bezoekers van je site daadwerkelijk kunnen verbeteren.

Het maken van een toegankelijke website hoeft niet moeilijk of tijdrovend te zijn. Door slechts een paar eenvoudige stappen te nemen, kun je de toegankelijkheid van je site aanzienlijk verbeteren. Op deze manier kun je je publiek vergroten en tegelijkertijd bijdragen aan de online toegankelijkheidsinspanningen. Je kunt zelfs anderen inspireren om hetzelfde te doen!

Hoe De Webtoegankelijkheid Van Je Site Te Controleren

Voordat we ingaan op tips en stappen voor het ontwerpen van een toegankelijke website, is het een goed idee om te beginnen met het bepalen van de huidige staat van je site–hoe deze voldoet aan toegankelijkheidsnormen en beste praktijken, en welke toegankelijkheidsbarrières je mogelijk moet overwinnen met wijzigingen of herontwerpen.

Er zijn veel verschillende manieren om de toegankelijkheid van je site te controleren. Laten we een paar van de gemakkelijkste en populairste opties verkennen.

Gebruik Een Online Toegankelijkheidscontroleur

Een van de snelste en eenvoudigste manieren om de toegankelijkheid van je site te controleren is door een online toegankelijkheidscontroleur te gebruiken, zoals WAVE Web Accessibility Evaluation Tools.

WAVE is een reeks evaluatiehulpmiddelen die je kunt gebruiken om je webpagina’s en inhoud te beoordelen en toegankelijker te maken voor personen met een beperking. WAVE-hulpmiddelen controleren de naleving van toegankelijkheidsnormen, zoals de WCAG, maar kunnen ook handmatige menselijke beoordelingen van je inhoud vergemakkelijken, als je een stap verder wilt gaan.

Om WAVE te gebruiken, voer je simpelweg de URL van de webpagina die je wilt evalueren in in het veld “Webpagina-adres” en klik op de pijlknop. WAVE genereert vervolgens een rapport dat eventuele fouten of mogelijke toegankelijkheidsproblemen op die pagina laat zien. Je kunt ook WAVE’s browserextensies voor Chrome, Firefox en Edge installeren om toegankelijkheid rechtstreeks in je webbrowser te testen.

Naast het foutenrapport geeft WAVE feedback over hoe je jouw pagina’s kunt verbeteren om hun toegankelijkheid te verhogen. Bijvoorbeeld, het kan je wijzen op afbeeldingen die alt-tekst missen of structurele elementen die op een manier zijn georganiseerd die sitebezoekers zou kunnen verwarren.

Installeer Een Browserextensie Voor Toegankelijkheid

WAVE is niet de enige browserplugin die automatisch websites controleert op toegankelijkheidsproblemen — er zijn vele andere die je kunt downloaden en gebruiken. Een populaire keuze voor Chrome en Firefox is de Accessible Rich Internet Applications (ARIA) extensie.

De ARIA DevTools-extensie is een gratis en open-source toegankelijkheidsbron die gebruikers in staat stelt om de manier waarop ze met webinhoud omgaan aan te passen. ARIA is ontworpen om de bruikbaarheid van webpagina’s voor mensen met beperkingen te verbeteren en ze toegankelijker te maken voor ondersteunende technologieën, zoals schermlezers.

ARIA doet dit door een reeks attributen te bieden die je kunt gebruiken om de toegankelijkheid van de HTML-elementen van je site te verbeteren. Bijvoorbeeld, het attribuut “aria-label” kan dienen als een marker voor een element dat anders niet toegankelijk is, terwijl het ‘aria-describedby’ attribuut gebruikt kan worden om een uitleg te bieden.

Om de ARIA-extensie te gebruiken, installeer je deze vanuit de extensiemarktplaats van je browser. Je moet deze mogelijk inschakelen voordat deze werkt.

Handmatig Controleren Op Veelvoorkomende Toegankelijkheidsproblemen

Een andere optie om te controleren op toegankelijkheidsproblemen is het gebruik van een handmatige aanpak. Natuurlijk kan dit meer tijd in beslag nemen dan het gebruik van online tools en extensies.

Echter, als je een handmatige controle uitvoert, kan deze grondiger zijn dan sommige digitale hulpmiddelen. Bovendien is deze methode gratis en beschikbaar voor alle website-eigenaren.

Als je besluit handmatig naar toegankelijkheidsproblemen te zoeken, wil je misschien een checklist gebruiken om te beginnen en te helpen garanderen dat je zo grondig mogelijk bent. WebAIM biedt een uitgebreide WCAG 2 Checklist met items zoals:

• Alle inhoud is toegankelijk voor iedereen, inclusief mensen met een handicap.
• Alle afbeeldingen zijn correct getagd met alternatieve tekst.
• De website is navigeerbaar met alleen een toetsenbord.
• Alle video- of audio-inhoud op de site bevat transcripties of ondertiteling.
• De website is vrij van kleurcontrasten die het lezen kunnen bemoeilijken.
• Inhoud kan worden geïnterpreteerd door een grote verscheidenheid aan gebruikersagents, inclusief ondersteunende technologieën.
• Inhoud vereist geen specifiek invoertype, zoals alleen aanraken of alleen toetsenbord, maar ondersteunt alternatieven (zoals het gebruik van een toetsenbord op een mobiel apparaat).

Huur Een Expert In Webtoegankelijkheid In Om Je Site Te Auditen

Als je de middelen hebt, is een vierde optie het inhuren van een expert om je website te auditen. Dit is vaak de beste manier om de meest uitgebreide beoordeling van de toegankelijkheid van je website te krijgen, waardoor het een bijzonder goede keuze is voor iedereen die toegankelijkheid als een kernwaarde van hun online bedrijf wil maken.

Bij DreamHost bieden we Professionele Diensten aan, waaronder webontwerp, websitebeheer en meer, wat kan inhouden dat we eventuele toegankelijkheidsproblemen op je website identificeren en oplossen.

Ons team van experts zal jouw webpagina’s zorgvuldig evalueren en je voorzien van toegankelijkheidsoplossingen voor eventuele barrières die zij identificeren. Neem vandaag nog contact met ons op om meer te weten te komen over Professionele Diensten of om een gratis consult te plannen.

Hoe Ontwerp Je Een Toegankelijke Website (Een Complete Gids)

Het is nu tijd voor het leuke deel: het ontwerpen en bouwen van je website zodat iedereen deze gemakkelijk kan gebruiken en navigeren. Het beginnen van je toegankelijkheidsreis voor je website is spannend, en de onderstaande stappen zullen je door het ontwerpproces leiden en helpen om ervoor te zorgen dat je website voldoet aan de wettelijke vereisten en technische normen om toegankelijk te zijn voor alle gebruikers. Laten we beginnen.

1. Zorg Dat Je Site Toetsenbordnavigatie Toestaat

Toetsenbordnavigatie is een hoeksteen van website-toegankelijkheid. Veel gebruikers, vooral die met motorische beperkingen, vertrouwen op een toetsenbord in plaats van een muis om websites te navigeren. Het garanderen dat je site toetsenbordnavigatie ondersteunt maakt het toegankelijk voor een breder scala aan gebruikers, inclusief degenen die afhankelijk zijn van ondersteunende technologieën.

Beste Praktijken:

• Zorg ervoor dat de tabvolgorde van je website logisch is. Dit betekent dat wanneer gebruikers op de Tab-toets drukken, de focus zich door interactieve elementen moet verplaatsen in een volgorde die logisch is, meestal volgens de visuele lay-out van de pagina.
• Wanneer gebruikers navigeren met een toetsenbord, zorg dan voor duidelijke visuele indicatoren die aangeven welk element momenteel focus heeft. Dit kan een rand zijn, een verandering van kleur, of een andere opvallende stijlwijziging.
• Voeg bovenaan elke pagina een link “Ga naar hoofdinhoud” toe. Dit stelt gebruikers die afhankelijk zijn van toetsenborden in staat om repetitieve navigatielinks over te slaan en direct toegang te krijgen tot de primaire inhoud.
• Als je site gebruikmaakt van dropdownmenu’s, zorg er dan voor dat ze met toetsenbordcommando’s kunnen worden genavigeerd en geactiveerd. Dit omvat het kunnen uitbreiden en inklappen van de menu’s en het selecteren van items binnen deze menu’s.
• Het implementeren van aangepaste toetsenbordsnelkoppelingen kan de bruikbaarheid verbeteren, maar wees voorzichtig dat ze niet conflicteren met bestaande browser- of schermlezersnelkoppelingen. Documenteer duidelijk aangepaste snelkoppelingen voor gebruikers.
• Zorg ervoor dat toetsenbordgebruikers niet vast komen te zitten in een deel van je site. Ze moeten in staat zijn om met alleen hun toetsenbord naar en van alle elementen te navigeren.

2. Maak Inhoud Makkelijk Zichtbaar En Hoorbaar

Ervoor zorgen dat de inhoud van je website gemakkelijk te zien en te horen is, is essentieel om deze toegankelijk te maken voor gebruikers met visuele en auditieve beperkingen. Dit omvat personen die blind zijn, een verminderd gezichtsvermogen hebben, kleurenblind zijn, of doof zijn of slechthorend.

Beste praktijken:

• Gebruik kleurencombinaties met hoog contrast tussen tekst en achtergronden om ervoor te zorgen dat tekst gemakkelijk leesbaar is. Vermijd het gebruik van kleuren die botsen of te dicht bij elkaar liggen. Gebruik ook leesbare lettergroottes en stijlen.
• Gebruik een online tool zoals Contrast Checker om je te helpen een kleurenpalet met hoog contrast te kiezen voor goede visuele toegankelijkheid.
• Zorg ervoor dat informatie die met kleur wordt overgebracht ook beschikbaar is zonder kleur, zoals via tekstlabels of patronen. Dit is vooral belangrijk voor gebruikers die kleurenblind zijn.
• Sta gebruikers toe om tekstgroottes aan te passen zonder de lay-out van je site te verbreken.
• Voor gebruikers met een visuele beperking, zorg ervoor dat eventuele audio-inhoud duidelijk, goed getimed en beschrijvend genoeg is om alle benodigde informatie over te brengen.
• Gebruik ARIA (Accessible Rich Internet Applications) rollen en landmarks. Deze kunnen gebruikers van schermlezers helpen om de lay-out te begrijpen en de inhoud effectiever te navigeren, vooral in complexe webapplicaties.

3. Bied Tekstalternatieven

Tekstalternatieven maken de niet-tekstuele inhoud van je site toegankelijk voor mensen met visuele en auditieve beperkingen. Deze alternatieven bieden een tekstueel equivalent van informatie die wordt overgebracht via afbeeldingen, video’s en audiobestanden, zodat alle gebruikers, inclusief degenen die schermlezers of andere hulpmiddelen gebruiken, toegang hebben tot dezelfde informatie.

Een ander voordeel is dat alt-tekst kan helpen je site te optimaliseren om zichtbaarder te zijn in zoekmachines. Je kunt het gebruiken om veelgezochte sleuteltermen die relevant zijn voor je afbeeldingen op te nemen.

Beste Praktijken: 

• Elke afbeelding op je site moet een bijbehorende alt-tekst hebben die de inhoud of functie van de afbeelding nauwkeurig en bondig beschrijft. Deze beschrijving moet dezelfde boodschap of doel overbrengen die de afbeelding heeft voor gebruikers die kunnen zien.
• Voeg alt-tekst toe aan afbeeldingen in WordPress via je Mediabibliotheek.
• Zorg voor ondertiteling bij video’s, die niet alleen de gesproken inhoud beschrijft, maar ook andere relevante geluiden en niet-spraakinformatie. Transcripties zijn ook belangrijk en bieden een tekstversie van alle audio-inhoud, inclusief gesproken woorden en andere relevante geluiden.
• Voeg bij video’s audiobeschrijvingen toe die de visuele informatie beschrijven. Dit is vooral belangrijk voor inhoud waarbij de visuals belangrijke informatie overbrengen die niet via audio alleen wordt overgebracht.
• Zorg ervoor dat alle links en knoppen tekstgebaseerd zijn of tekstalternatieven hebben zodat hun functie duidelijk is voor gebruikers van schermlezers. Vermijd het gebruik van afbeeldingen als enige middel om belangrijke acties of links over te brengen.
• Voor complexe visuele inhoud zoals grafieken en diagrammen, bied een tekstgebaseerde samenvatting of beschrijving die de gepresenteerde gegevens of informatie uitlegt.
• Interactieve elementen zoals formulieren moeten duidelijke en beschrijvende labels hebben. Dit helpt gebruikers te begrijpen waar elk formulieronderdeel voor is en hoe ermee te interageren.

4. Organiseer En Structureer Inhoud Op Een Aanpasbare Manier

Het organiseren en structureren van inhoud op een aanpasbare manier zorgt ervoor dat alle gebruikers, ongeacht hoe ze je website benaderen, de informatie op een samenhangende en logische manier ontvangen. Deze aanpak is voordelig voor gebruikers die afhankelijk zijn van ondersteunende technologieën, zoals schermlezers, en voor mensen met cognitieve beperkingen die complexe lay-outs of inconsistente structuren verwarrend kunnen vinden.

Beste Praktijken:

• Gebruik HTML5 semantische elementen zoals <header>, <footer>, <nav>, <article> en <section> om je inhoud duidelijk te structureren. Deze elementen bieden context aan ondersteunende technologieën, waardoor ze de structuur en lay-out van je webpagina aan gebruikers kunnen overbrengen.
• Gebruik koppen (H1, H2, H3, enz.) om inhoud hiërarchisch en logisch te structureren. Zorg ervoor dat koppen beschrijvend zijn en een duidelijke indicatie geven van de inhoud die volgt.
• Ontwerp de lay-out van je website flexibel. Dit betekent dat het zich moet aanpassen aan verschillende schermformaten en -oriëntaties zonder informatie of functionaliteit te verliezen. Dit is vooral belangrijk voor gebruikers met een verminderd gezichtsvermogen die mogelijk moeten inzoomen of voor degenen die je site op mobiele apparaten bezoeken.
• Als je tabellen gebruikt voor gegevens, zorg er dan voor dat ze correct zijn gemarkeerd met rij- en kolomkoppen. Vermijd het gebruik van tabellen voor lay-outdoeleinden, aangezien dit verwarrend kan zijn voor gebruikers van schermlezers.
• Gebruik geordende (genummerde) en ongeordende (met opsommingstekens) lijsten om gerelateerde items te groeperen. Dit helpt schermlezers de structuur en organisatie van de inhoud over te brengen.

5. Bied Alternatieve Manieren Om Tijdgebonden Media Te Gebruiken

Tijdgebonden media omvat audio- en video-inhoud. Mensen die doof of slechthorend zijn, evenals zij die blind zijn of slechtziend, hebben alternatieve manieren nodig om tijdgebonden media te consumeren.

Beste praktijken:

• Bied gesloten ondertiteling voor alle video-inhoud. Ondertitels moeten het gesproken dialoog nauwkeurig weerspiegelen en relevante niet-dialogue audio-aanwijzingen beschrijven, zoals muziek of geluidseffecten, die belangrijk zijn voor het begrijpen van de inhoud.
• Maak transcripties voor zowel audio- als video-inhoud.
• Voeg audiobeschrijvingen toe in video’s, die de visuele aspecten van de video vertellen.
• Zorg ervoor dat de mediaspelers die op je site worden gebruikt toegankelijk zijn. Ze moeten navigeerbaar en bedienbaar zijn met een toetsenbord, en hun functies (zoals afspelen, pauzeren en het volume aanpassen) moeten duidelijk gelabeld zijn en begrijpelijk voor gebruikers van schermlezers.
• Overweeg voor belangrijke video-inhoud een gebarentaalinterpretatie te bieden. Dit kan een aparte videotrack zijn of een beeld-in-beeld weergave binnen de video, die een gebarentaalvertaling van de gesproken inhoud biedt.
• Bied opties om de afspeelsnelheid te regelen en om inhoud te pauzeren, terug te spoelen of snel vooruit te spoelen. Deze flexibiliteit kan bijzonder voordelig zijn voor gebruikers met cognitieve beperkingen, leerstoornissen of degenen die meer tijd nodig hebben om audiovisuele informatie te verwerken.
• Vanaf WordPress 5.6 kun je ondertitels en bijschriften toevoegen aan WordPress-video’s met behulp van de Web Video Text Tracks Format (WebVTT) functie. Om het te gebruiken, voeg je simpelweg een videoblok toe op je pagina, en selecteer je de knop voor teksttracks in je horizontale navigatiemenu.

6. Ontwerp Formulieren Zorgvuldig

Formulieren zijn noodzakelijk voor veel sites en worden gebruikt voor alles van contactinformatie tot online aankopen. Goed ontworpen formulieren zorgen ervoor dat alle gebruikers hun informatie kunnen invoeren, selecties kunnen maken en eventuele fouten kunnen begrijpen die kunnen optreden tijdens het indienen.

Beste praktijken:

• Elk formulier veld moet een duidelijk en beschrijvend label hebben dat programmatisch is gekoppeld aan het veld. Dit helpt gebruikers van schermlezers om te begrijpen welk type informatie wordt verwacht.
• Wanneer gebruikers een fout maken, zoals het missen van een verplicht veld of het invoeren van ongeldige gegevens, moet de fout duidelijk worden geïdentificeerd en beschreven in tekst. Dit helpt gebruikers te begrijpen wat er gecorrigeerd moet worden.
• Zorg ervoor dat de tabvolgorde van het formulier een logische volgorde volgt, waardoor gebruikers op een voorspelbare manier met het toetsenbord door de formulier velden kunnen navigeren.
• Bij het navigeren door het formulier met de tabtoets moet er een zichtbare indicatie zijn van welk veld momenteel de focus heeft, zoals een rand of kleurverandering van de achtergrond.
• Gebruik veldsets en legendes om gerelateerde velden te groeperen. Dit is vooral handig voor gebruikers van schermlezers, omdat het context biedt en helpt bij het begrijpen hoe verschillende velden gerelateerd zijn.
• Als je formulier dropdowns, selectievakjes of aangepaste bedieningselementen bevat, zorg er dan voor dat deze volledig toegankelijk zijn en kunnen worden genavigeerd en geselecteerd met een toetsenbord.
• Waar nodig, geef instructies of voorbeelden voor velden, vooral voor diegenen die gegevens in een specifiek formaat vereisen, zoals datums of telefoonnummers.
• Als je formulier een tijdslimiet heeft voor het invullen, bied dan een manier voor gebruikers om de tijd indien nodig te verlengen, aangezien sommige gebruikers meer tijd nodig kunnen hebben om het formulier te lezen en in te vullen.
• Zorg ervoor dat het formulier bruikbaar is op verschillende apparaten en schermformaten, vooral voor gebruikers die mogelijk inzoomen of een mobiel apparaat gebruiken.
• Plugins zoals Formidable Forms bevatten handige ingebouwde toegankelijkheidstools.

7. Geef Bezoekers Genoeg Tijd Om Met Je Site Te Interageren

Sommige sitebezoekers lezen misschien langzaam, hebben cognitieve of leerstoornissen, of gebruiken hulpmiddelen die extra tijd nodig hebben om de inhoud te navigeren en te interpreteren. Zorg ervoor dat je hen voldoende tijd geeft om alles op je site te lezen, te bekijken en te gebruiken.

Best practices: Beste Praktijken:

• Als je website functies of inhoud heeft met tijdslimieten (zoals getimede quizzen, formulieren met sessietijdslimieten, of roterende carrousels), bied dan een manier voor gebruikers om deze aan te passen, te verlengen of uit te schakelen.
• Voor alle bewegende, knipperende of scrollende inhoud en voor automatisch bijgewerkte informatie (zoals nieuws tickers), bied bedieningselementen die gebruikers in staat stellen om deze te pauzeren, stoppen of verbergen.
• Vermijd automatisch bijwerken van inhoud zonder initiatie van de gebruiker, aangezien dit desoriënterend kan zijn voor gebruikers van schermlezers.
• Als een time-out noodzakelijk is (zoals om veiligheidsredenen op een bankwebsite), waarschuw gebruikers dan voordat de tijd verloopt. Dit geeft hen de kans om hun sessie te verlengen zonder gegevensverlies.

8. Vermijd Knipperende Of Flikkerende Inhoud

Het vermijden van knipperende of flitsende inhoud kan je website toegankelijker maken voor gebruikers die gevoelig zijn voor aanvallen veroorzaakt door flitsende lichten of patronen, een aandoening die bekend staat als fotosensitieve epilepsie. Daarnaast kan snel knipperende of flitsende inhoud afleidend zijn, of zelfs pijnlijk voor gebruikers, wat bijdraagt aan een onaangename of ontoegankelijke webervaring.

Beste Praktijken:

• Als algemene regel, vermijd inhoud die meer dan drie keer in een periode van één seconde flitst. Deze richtlijn, onderdeel van de Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG), helpt het risico op aanvallen te verminderen.
• Als je website inhoud moet bevatten die flitst of knippert (om artistieke of informatieve redenen), geef dan een duidelijke waarschuwing voordat de inhoud wordt getoond. Dit stelt gebruikers met fotosensitiviteit in staat om dergelijke inhoud te vermijden of zich voor te bereiden op blootstelling eraan.
• Let op animaties en overgangen in je webdesign. Zorg ervoor dat ze subtiel zijn en geen flitsende of snelle bewegingen bevatten. Bied opties om animaties te verminderen of indien mogelijk uit te schakelen.
• Gebruik in plaats van flitsende inhoud om aandacht te trekken, alternatieve methoden zoals het gebruik van felle kleuren, patronen, of statische afbeeldingen die even effectief zijn maar geen risico vormen voor gebruikers.
• Bij twijfel, raadpleeg experts in webtoegankelijkheid die je site kunnen beoordelen op potentieel problematische inhoud en veiligere alternatieven kunnen voorstellen.

9. Zorg Voor Duidelijke Navigatie

Heldere navigatie is een hoeksteen van webtoegankelijkheid. Het stelt alle gebruikers, inclusief mensen met beperkingen, in staat om gemakkelijk hun weg te vinden op je site. Goede navigatie is vooral gunstig voor gebruikers met beperkingen en degenen die afhankelijk zijn van ondersteunende technologieën. Duidelijke, voorspelbare navigatiestructuren helpen gebruikers te begrijpen waar ze zich op je site bevinden, hoe ze op hun gewenste bestemming kunnen komen, en hoe ze naar eerder bezochte pagina’s kunnen terugkeren.

Beste praktijken:

• Houd de navigatielay-out consistent over de hele site. Consistentie helpt gebruikers om te leren en te onthouden hoe ze je site kunnen navigeren, waardoor verwarring en frustratie verminderen.
• Groepeer gerelateerde navigatie-items samen. Dit kan worden bereikt door goed georganiseerde menu’s, duidelijke sectiekoppen of een sitemap die een overzicht biedt van de structuur van je website.
• Zorg ervoor dat alle menu’s toegankelijk zijn met toetsenbordnavigatie en schermlezers. Dit omvat ook uitklapmenu’s en andere dynamische inhoud.
• Gebruik voor websites met meerdere lagen van inhoud broodkruimelpaden. Deze bieden gebruikers een duidelijk pad van hun reis vanaf de startpagina naar hun huidige locatie en helpen bij gemakkelijke navigatie terug naar eerdere secties.
• Implementeer een robuuste zoekfunctie, vooral voor grotere sites. Hiermee kunnen gebruikers snel informatie vinden zonder door meerdere pagina’s te navigeren.

10. Maak Inhoud Duidelijk En Makkelijk Te Begrijpen

Het duidelijk en gemakkelijk te begrijpen maken van de inhoud van je website kan bezoekers met een handicap, leerproblemen of diegenen die de taal van de site niet als moedertaal spreken, helpen. Duidelijke, eenvoudige inhoud zorgt ervoor dat informatie toegankelijk is voor een breder publiek en helpt alle gebruikers om snel de bedoelde boodschap of actie te begrijpen.

Beste praktijken:

• Schrijf inhoud in eenvoudige taal. Vermijd complexe zinnen, jargon en technische termen. Wanneer technische termen noodzakelijk zijn, geef dan eenvoudige uitleg of een woordenlijst.
• Gebruik koppen en subkoppen om je inhoud logisch te structureren. Dit helpt gebruikers, vooral degenen die schermlezers gebruiken, om de indeling te begrijpen en informatie gemakkelijker te vinden.
• Houd paragrafen en zinnen kort en bondig. Deze structuur maakt de inhoud makkelijker te lezen en te begrijpen.
• Gebruik opsommingstekens of genummerde lijsten om informatie op te delen in beheersbare, makkelijk te verteren stukken. Dit is vooral handig voor instructies of complexe informatie.
• Behoud een consistente indeling en ontwerp door je hele site. Consistentie in lettertypen, kleuren en stijlen helpt gebruikers om je inhoud beter te begrijpen en te navigeren.
• Gebruik waar passend afbeeldingen, iconen of diagrammen om de tekst te ondersteunen. Visuele hulpmiddelen kunnen helpen om complexe informatie duidelijker over te brengen en zijn voordelig voor gebruikers die visuele informatie effectiever verwerken dan tekst.
• Maak actieknoppen of links duidelijk en beschrijvend. Gebruikers zouden moeten kunnen begrijpen wat er gebeurt wanneer ze erop klikken.

11. Schrijf Nuttige Foutmeldingen

Effectieve foutmeldingen helpen gebruikers bij het oplossen van problemen die ze tegenkomen, wat vooral belangrijk is voor gebruikers met beperkingen die het mogelijk moeilijker vinden om fouten te begrijpen en te herstellen. Duidelijke, informatieve foutmeldingen helpen frustratie te voorkomen, zodat alle gebruikers succesvol kunnen omgaan met jouw website en hun bedoelde acties kunnen voltooien.

Beste Praktijken:

• Foutmeldingen moeten duidelijk aangeven wat het probleem is. Vermijd vage of technische taal die gebruikers kan verwarren. Zeg bijvoorbeeld niet “Ongeldige invoer”, maar specificeer wat er mis is, zoals “Het formaat van het e-mailadres is incorrect.”
• Koppel indien mogelijk de foutmelding aan een voorgestelde oplossing of volgende stappen. Als bijvoorbeeld een verplicht veld leeg is, moet de foutmelding de gebruiker aansporen om dat veld in te vullen.
• Markeer visueel het veld of het gebied waar de fout optrad. Dit kan door het veranderen van de randkleur, het toevoegen van een icoon, of het gebruik van tekststijlen. Dit is vooral handig voor gebruikers met visuele beperkingen.
• Gebruik een vriendelijke, niet-technische toon in je foutmeldingen. Deze aanpak vermindert frustratie en angst, vooral voor gebruikers die mogelijk al moeite hebben met het navigeren op je site.
• Plaats foutmeldingen dicht bij de fout, bij voorkeur boven of naast het betreffende formulier veld. Dit maakt het voor gebruikers, inclusief degenen die schermlezers gebruiken, gemakkelijker om de fout te lokaliseren en te begrijpen.
• Zorg ervoor dat foutmeldingen en indicatoren toegankelijk zijn voor gebruikers van schermlezers. Gebruik ARIA-rollen en -eigenschappen om de aanwezigheid en aard van fouten te communiceren.
• Gebruik een consistente methode voor het identificeren en presenteren van fouten op je website. Consistentie helpt gebruikers te begrijpen en te voorspellen hoe fouten kunnen worden gecommuniceerd.
• Bied in gevallen van complexe of herhaalde fouten een optie voor extra hulp, zoals contactinformatie van de klantenservice.

12. Schrijf HTML Die Geparst Kan Worden

Schrijf ten slotte HTML die kan worden geparseerd, of correct verwerkt door webbrowsers en ondersteunende technologieën. Goed gestructureerde en geldige HTML-code stelt schermlezers en andere ondersteunende hulpmiddelen in staat de inhoud nauwkeurig te interpreteren en over te brengen aan gebruikers. Deze praktijk is fundamenteel voor het creëren van een webomgeving die inclusief en navigeerbaar is voor iedereen.

Best practices: Beste praktijken:

• Gebruik standaard HTML-tags en vermijd eigen tags of attributen. Dit zorgt ervoor dat je HTML-code universeel begrepen wordt door alle browsers en hulptechnologieën.
• Structureer je HTML-document op de juiste manier. Gebruik een logische volgorde voor HTML-elementen, en zorg ervoor dat elementen zoals koppen (<h1> tot <h6>), paragrafen (<p>), lijsten (<ul>, <ol>, <li>) en andere standaardelementen op de juiste wijze worden gebruikt.
• Gebruik HTML5 semantische elementen zoals <header>, <footer>, <article>, <section> en <nav> om de structuur van je webpagina te definiëren.
• Gebruik HTML-validatoren om je code te controleren op fouten of inconsistenties. Geldige HTML wordt waarschijnlijker correct geïnterpreteerd door browsers en hulptechnologieën.
• Houd inhoud, stijl en gedrag gescheiden. Gebruik externe CSS voor styling en externe JavaScript-bestanden voor gedragingen in plaats van inline stijlen of scripts. Deze scheiding helpt om schone, leesbare en toegankelijke HTML te behouden.
• Gebruik betekenisvolle titel tags en meta beschrijvingen om het doel van de pagina over te brengen.
• Verklaar de taal van de pagina met behulp van het lang-attribuut in de <html> tag. Dit helpt schermlezers de inhoud correct uit te spreken.

Maak Het Iedereen Makkelijk Om Jouw Site Te Bezoeken

Voortdurende verbeteringen in webtoegankelijkheid zijn een reden voor een feestje. Immers, als je een WordPress-website beheert, wil je zoveel mogelijk mensen bereiken, inclusief mensen met een beperking. Gelukkig is het ontwerpen van een toegankelijke website goed binnen je bereik.

In deze post hebben we veel strategieën besproken die je kunt gebruiken om een site te ontwerpen die gemakkelijker is voor al je bezoekers om te navigeren en te gebruiken. Je kunt bijvoorbeeld zorgen dat je website vriendelijk is voor navigatie via het toetsenbord om compatibel te zijn met ondersteunende technologieën. Je kunt ook alt-tekst en video transcripties gebruiken voor al je visuele media. Het belangrijkste is dat je, door onze gids te volgen, een meer gelijke webervaring ondersteunt, waardoor je site beschikbaar is voor zoveel mogelijk mensen.

Wil je een ontwikkelaar inhuren die de webtoegankelijkheid voor je evoluerende WordPress-projecten kan maximaliseren? Als je deze belangrijke taak liever overlaat aan de professionals, bekijk dan onze DreamHost Development Pro Services!