Preambule

Webtoegankelijkheid is een essentiële praktijk die tot doel heeft online inhoud en functionaliteiten toegankelijk te maken voor alle mensen, ongeacht hun vaardigheden, handicaps of voorkeuren. Deze uitgebreide gids onderzoekt verschillende aspecten van webtoegankelijkheid, van definities tot praktische hulpmiddelen voor ontwikkelaars.

Introductie

Webtoegankelijkheid verwijst naar de praktijk van het zorgen ervoor dat websites toegankelijk zijn voor iedereen, wat volledige deelname aan de digitale samenleving bevordert. Deze aanpak voldoet niet alleen aan wettelijke vereisten, maar draagt ook bij aan een inclusieve online ervaring voor alle gebruikers.

Technische normen en regelgeving voor webtoegankelijkheid

Technische standaarden, zoals EN301549 en de Web Content Accessibility Guidelines (WCAG) 2.1, bieden uitgebreide aanbevelingen om de webtoegankelijkheid te verbeteren. De Web Content Accessibility Guidelines (WCAG) hanteren fundamentele principes zoals waarneembaar, bedienbaar, begrijpelijk en robuust. Deze standaarden dienen als basis om ervoor te zorgen dat websites aanvaardbare criteria voldoen.

Regelgeving zoals de EU-wet inzake toegankelijkheid, de ADA en WCAG zijn fundamenteel voor het waarborgen van wereldwijde naleving en toegankelijkheid. Deze regelgevingen bestrijken verschillende rechtsgebieden en hebben een aanzienlijke impact op de toegankelijkheid van websites.

Technische normen:

1. EN301549:
   • Aanmaakdatum: EN301549 is een Europese norm die voortkomt uit het European Telecommunications Standards Institute (ETSI). Het werd oorspronkelijk gepubliceerd in 2014.
   • Dekking: EN301549 is een Europese norm en richt zich voornamelijk op het stellen van toegankelijkheidseisen die geschikt zijn voor de openbare aanbesteding van ICT-producten en -diensten.
2. Web Content Accessibility Guidelines (WCAG) 2.1:
   • Aanmaakdatum: De WCAG 2.1 werd ontwikkeld door het Web Accessibility Initiative (WAI) van het World Wide Web Consortium (W3C). Het werd officieel gepubliceerd op 5 juni 2018.
   • Dekking: WCAG is een internationale standaard en is niet specifiek voor een bepaald land of regio. Het dient als een wereldwijd erkende reeks richtlijnen voor webtoegankelijkheid.

Reglementen

1. EU Toegankelijkheids-wet
   • Aanmaakdatum: De EU Toegankelijkheidswet werd in 2019 officieel goedgekeurd door het Europees Parlement.
   • Dekking: De EU-toegankelijkheidsrichtlijn is specifiek voor de Europese Unie. Het heeft tot doel de toegankelijkheidsvereisten voor bepaalde producten en diensten, waaronder websites en mobiele applicaties, in de EU-lidstaten te harmoniseren.
2. Americans with Disabilities Act (ADA):
   • Aanmaakdatum: De ADA werd op 26 juli 1990 ondertekend.
   • Dekking: De ADA is een federale wet in de Verenigde Staten. Het verbiedt discriminatie van personen met een handicap en is van toepassing op verschillende aspecten van het openbare leven, inclusief toegankelijkheidseisen voor digitale inhoud.

Web Content Accessibility Guidelines (WCAG) – Onderdeel van Zowel Standaarden als Regelgeving:

• WCAG:
  • Aanmaakdatum: De eerste versie van WCAG (1.0) werd gepubliceerd in 1999 en heeft sindsdien updates ondergaan. WCAG 2.0, een belangrijke herziening, werd in 2008 gepubliceerd en WCAG 2.1, de meest recente versie, werd in 2018 gepubliceerd.
  • Dekking: WCAG is een internationale standaard en wordt vaak genoemd in verschillende regelgevingen wereldwijd. Het biedt richtlijnen om webinhoud toegankelijker te maken voor mensen met een handicap.

Samenvattend, terwijl technische normen zoals EN301549 en WCAG richtlijnen bieden voor webtoegankelijkheid, stellen regelgevingen zoals de EU Accessibility Act en de ADA juridische vereisten vast in specifieke regio's. WCAG dient als een gemeenschappelijk referentiepunt en sluit wereldwijd aan bij zowel technische normen als regelgevingen.

Hulpmiddelen en technieken voor webtoegankelijkheid

Ontwikkelaars spelen een cruciale rol bij het waarborgen van toegankelijkheid. Het juiste gebruik van HTML-elementen, zoals kopteksten en alternatieve tekst voor afbeeldingen, is fundamenteel. Hulpmiddelen zoals schermlezers en vergrootglazen zijn essentieel. Daarnaast kunnen specifieke tools zoals AccessMonitor en Sublime helpen bij het beoordelen van de toegankelijkheid van een website.

HTML Code Voorbeelden

Zie praktische HTML-codegeneratoren, zowel niet-nalevende als nalevende, die het belang van het volgen van richtlijnen om toegankelijkheid te garanderen illustreren:

Niet-toegankelijke HTML-code voor afbeeldingen




Voorbeeld:

In dit voorbeeld biedt de HTML-code geen alternatieve tekst voor de afbeeldingen, waardoor gebruikers die ze niet kunnen zien geen toegang hebben tot de overgedragen informatie.

Toegankelijke HTML-code voor afbeeldingen





Voorbeeld:

In dit voorbeeld biedt de HTML-code alternatieve tekst voor de afbeeldingen, waarbij de inhoud en het doel ervan worden beschreven voor gebruikers die ze niet kunnen zien.

Niet-toegankelijke HTML-code voor formulieren

<form action="submit" method="POST">
Naam:

E-mail:

Wachtwoord:

Opmerking:

<input type="submit" value="Submit">
</form>


Voorbeeld:

In dit voorbeeld associeert de HTML-code geen labels met invoervelden, waardoor gebruikers een duidelijke en consistente referentie missen voor wat ze in elk veld moeten invullen.

Toegankelijke HTML-code voor formulieren

<form action="submit" method="POST">
Naam:


E-mail:


Wachtwoord:


Opmerking:


<input type="submit" value="Submit">
</form>


Voorbeeld:

In dit voorbeeld worden in de HTML-code labels aan invoervelden gekoppeld met behulp van het ‘for’-attribuut in de  tag en het ‘id’-attribuut in de  of .

Ondanks het feit dat beide formulieren er visueel exact hetzelfde uitzien, heeft het laatste formulier een veel grotere mate van toegankelijkheid. Deze extra inspanning om visuele elementen te correleren zorgt ervoor dat een groter deel van het publiek op de webpagina kan interageren met het formulier en gegevens kan indienen.

Belang van HTML-semantiek en ARIA-attributen

Het juiste gebruik van HTML-semantiek, zoals 

, 

, en 

 tags, draagt aanzienlijk bij aan de toegankelijkheid. Deze tags zorgen voor een duidelijke structuur van de inhoud, waardoor het voor hulpmiddelen gemakkelijker wordt om de inhoud te navigeren en te begrijpen.

Naast HTML-semantiek, ARIA kenmerken ARIA staat voor Toegankelijke rijke internetapplicaties en een set van rollen en attributen die manieren definiëren om webcontent en webapplicaties toegankelijker te maken voor mensen met een handicap.

ARIA maakt toegankelijke JavaScript-widgets, formuliertips en foutmeldingen, live content-updates en meer mogelijk. Het is echter belangrijk op te merken dat ontwikkelaars bij voorkeur het juiste semantische HTML-element moeten gebruiken in plaats van ARIA, als een dergelijk element bestaat.

De eerste regel van ARIA-gebruik is: “Als je een native HTML-element of -attribuut kunt gebruiken met de semantiek en het gedrag dat je nodig hebt, in plaats van een element te hergebruiken en een ARIA-rol, status of eigenschap toe te voegen om het toegankelijk te maken, doe dat dan.”

Hier is een voorbeeld van hoe ARIA-attributen kunnen worden gebruikt om een voortgangsbalk-widget te maken:

HTML Code Voorbeeld




In dit voorbeeld informeert het attribuut `role=”progressbar”` de browser dat dit element eigenlijk een met JavaScript aangestuurde voortgangsbalk-widget is. De attributen `aria-valuemin` en `aria-valuemax` specificeren de minimale en maximale waarden voor de voortgangsbalk, en `aria-valuenow` beschrijft de huidige status ervan en moet daarom met JavaScript up-to-date worden gehouden.

Kleurcontrast en het belang ervan

Adequaat contrast tussen tekst en achtergrond is cruciaal voor de leesbaarheid, vooral voor mensen met visuele beperkingen. Hulpmiddelen zoals de “Color Contrast Checker” helpen bij het handhaven van het juiste contrast.

Adequaat contrast tussen tekst en achtergrond is cruciaal voor de leesbaarheid, vooral voor mensen met visuele beperkingen. Hulpmiddelen zoals de “Color Contrast Checker” helpen bij het handhaven van het juiste contrast.

De contrastverhouding is een maat voor het verschil tussen de minimale en maximale helderheid van een monitor 1. Het wordt berekend door de relatieve luminantie van de lichtere kleur te delen door de relatieve luminantie van de donkerdere kleur, met de volgende formule: (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 de relatieve luminantie van de donkerdere kleur 2. De contrastverhouding varieert van 1:1 (helemaal geen contrast) tot 21:1 (het hoogst mogelijke contrast) 2. De contrastverhouding is bedacht door Lea Verou.

Positief voorbeeld:

    Een goed contrast tussen tekst en achtergrond is van cruciaal belang voor de leesbaarheid, vooral voor mensen met een visuele beperking.




Voorbeeld:

Adequaat contrast tussen tekst en achtergrond is cruciaal om de leesbaarheid te garanderen, vooral voor mensen met visuele beperkingen.

In dit voorbeeld hebben de tekstkleur (#333) en de achtergrondkleur (#fff) voldoende contrast, waardoor de tekst goed leesbaar is. De tekstkleur (#333) en de achtergrondkleur (#fff) hebben voldoende contrast, waardoor de tekst goed leesbaar is. De contrastverhouding voor dit voorbeeld is groter dan of gelijk aan 4,5:1 voor normale tekst en 3:1 voor grote tekst (minimaal 18 pt) of vetgedrukte tekst, wat voldoet aan de minimale contrastvereisten voor toegankelijkheid volgens de Web Content Accessibility Guidelines (WCAG).

Test het zelf met behulp van de volgende tool: coolors.co

Negatief voorbeeld:




Adequaat contrast tussen tekst en achtergrond is cruciaal om de leesbaarheid te garanderen, vooral voor mensen met visuele beperkingen.

Voorbeeld:

Adequaat contrast tussen tekst en achtergrond is cruciaal om de leesbaarheid te garanderen, vooral voor mensen met visuele beperkingen.

In dit voorbeeld is het contrast tussen de tekstkleur (#999) en de achtergrondkleur (#eee) onvoldoende, waardoor de tekst moeilijk leesbaar kan zijn, met name voor mensen met een visuele beperking. Het contrast tussen de tekstkleur (#999) en de achtergrondkleur (#eee) is onvoldoende, waardoor de tekst moeilijk leesbaar kan zijn, met name voor mensen met een visuele beperking. De contrastverhouding voor dit voorbeeld is minder dan 4,5:1 voor normale tekst en 3:1 voor grote tekst (minimaal 18 pt) of vetgedrukte tekst, wat niet voldoet aan de minimale contrastvereisten voor toegankelijkheid volgens de WCAG.

Test het zelf met behulp van de volgende tool: coolors.co

Webtoegankelijkheidsbeoordelingstools

Gereedschappen zoals GOLF, WebAIM, en Toegankelijkheidscontrole zijn essentieel voor het evalueren van de toegankelijkheid van een website en het beoordelen van de naleving van toegankelijkheidsnormen. Deze tools analyseren elementen die toegankelijkheidsproblemen kunnen veroorzaken en bieden correctiesuggesties. Ze genereren gedetailleerde rapporten die de identificatie en correctie van problemen vergemakkelijken.

GOLF is een reeks evaluatietools die auteurs helpt hun webinhoud toegankelijker te maken voor mensen met een handicap. Het kan veel toegankelijkheids- en Web Content Accessibility Guideline (WCAG) fouten identificeren, maar vergemakkelijkt ook menselijke evaluatie van webcontent.

WebAIM is een non-profitorganisatie die webtoegankelijkheidsoplossingen biedt. Hun evaluatietools omvatten de WebAIM Kleurcontrastcontrole, die het contrast tussen twee kleuren controleert en bepaalt of ze voldoen aan de WCAG 2.0 vereisten.

Toegankelijkheidscontrole is een gratis tool die webtoegankelijkheidsproblemen identificeert en exacte instructies biedt om deze op te lossen. Het controleert op naleving van de Web Content Accessibility Guidelines (WCAG) en de Americans with Disabilities Act (ADA)..

Nuttige browser-extensies

Stark Toegankelijkheidscontrole Het is een reeks geïntegreerde toegankelijkheidstools die ontwerpers, ontwikkelaars, productmanagers en toegankelijkheidsexperts bij meer dan 30.000 bedrijven helpt om digitale toegankelijkheid na te leven sneller te realiseren. Het biedt een breed scala aan geïntegreerde tools om eenvoudig toegankelijke software te creëren en te testen, waaronder Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator en meer. Klik hier om de Firefox-Stats pagina van deze extensie te controleren.

IBM Equal Access ToegankelijkheidscontroleHet is een open-source tool voor webontwikkelaars en auditors die gebruikmaakt van de toegankelijkheids-regelengine van IBM, waarmee toegankelijkheidsproblemen voor webpagina's en webapplicaties worden gedetecteerd. Het biedt een breed scala aan geïntegreerde tools om eenvoudig toegankelijke software te maken en te testen, waaronder Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator en meer. Klik hier om de pagina van deze extensie in de Chrome Web Store te bekijken.

Conclusie

Webtoegankelijkheid is een voortdurende reis. Door technische normen, regelgeving en best practices te volgen, dragen ontwikkelaars bij aan een online omgeving die voor iedereen toegankelijk is. Het gebruik van de juiste tools en technieken is essentieel om ervoor te zorgen dat het web inclusief is en gelijke toegang en participatie bevordert.

Referenties en Citaten

1. Talita Pagani – talitapagani.com
2. Toegankelijkheid Portugal – acessibilidade.gov.pt
3. Neil Patel – neilpatel.com
4. Alura – alura.com.br
5. Voitto – voitto.com.br
6. Webontwikkeling – desenvolvimentoparaweb.com
7. Mozilla Ontwikkelaar – developer.mozilla.org
8. Toegankelijke Ontwikkeling – desenvolvimentoacessivel.com
9. UX Sapo – ux.sapo.pt
10. Toegankelijkheid.net – toegankelijkheid.net
11. CTI IFRS – cta.ifrs.edu.br
12. Mailchimp – mailchimp.nl
13. TIC Portugal – tic.gov.pt
14. Toegankelijkheid voor iedereen – toegankelijkheidvooreder.nl
15. Handspraak handtalk.me
16. UFRGS – ufrgs.nl
17. UX Design Brazilië – brasil.uxdesign.cc
18. EN301549 – Europese Norm EN 301 549 V2.1.2
19. Web Content Accessibility Guidelines (WCAG) 2.1
20. EU-toegankelijkheidsrichtlijn – Richtlijn (EU) 2019/882 – EU-toegankelijkheidsrichtlijn
21. Americans with Disabilities Act (ADA) – Americans with Disabilities Act (ADA)
22. Americans with Disabilities Act (ADA) – Wetshistorie – ADA National Network
23. Web Content Accessibility Guidelines (WCAG) Geschiedenis – W3C – WCAG Huidige Status – WebAIM – WCAG Tijdlijn
24. Hoe bereken je kleurcontrast – toegankelijkheids-ontwikkelaarsgids

 
Vitor Vinicius

Softwareontwikkelaar