De toegankelijkheid van het web.

Milan Vogels - NiceToKnow - 13 mrt 2018
De toegankelijkheid van het web.

Op 22 december 2016 is de EU-richtlijn voor de toegankelijkheid van de websites en mobiele applicaties van overheidsinstanties in werking getreden. Vanaf 23 september 2018 wordt het wettelijk verplicht voor (semi-) overheids websites en applicaties om aan deze richtlijnen te voldoen.

 

De wettelijke verplichting voor (semi)-overheid is een mooi begin. Maar als ontwikkelaars van digitale producten hebben we de mogelijkheid (en morele verantwoordelijkheid) om de digitale toegankelijkheid te vergroten voor alle websites en applicaties. Wanneer je direct bij het begin van het ontwikkeltraject direct rekening houdt met de toegankelijkheid hoeft het ook helemaal geen extra tijd te kosten.

Hoe ontwikkel je toegankelijke websites?

Voor het ontwikkelen van toegankelijke websites heeft het W3C richtlijnen opgesteld: de

Web Content Accessibility Guidelines 2.0 (WCAG). Deze richtlijnen geven een groot aantal aanbevelingen om het web toegankelijker te maken.


Veel mensen met een beperking gebruiken dan ook speciale software om hun weg te vinden op het internet. Denk hierbij aan voorleessoftware (screenreaders) of vergrotingssoftware. Deze software dient wel de code van een website correct te kunnen interpreteren.

Een aantal basistips voor het ontwikkelen van toegankelijke websites:

  1. Schrijf semantisch correcte HTML. Gebruik HTML-elementen waarvoor ze bedoeld zijn.
  2. Zorg altijd dat er een alt-tag aanwezig is (ook al is deze leeg). Schrijf voor afbeeldingen die de content verrijken goede alternatieve teksten.
  3. Zorg voor voldoende contrast, zodat de content goed leesbaar is.
  4. Beschrijf elementen die geen tekst hebben maar wel een functionaliteit hebben (bijvoorbeeld een hamburger menu) met WAI-ARIA attributen.

 

Hoe kan je controleren of hetgeen wat ontwikkeld is ook voldoet aan de toegankelijkheidsrichtlijnen?

Debugging de Accessibility Tree

De Accessibility Tree is de structuur die de browser presenteert aan een screenreader. Een screenreader gebruikt dus niet direct de DOM (Document Object Model) van je website, maar de browser zet deze om in de zogeheten Accessibility Tree.

 

Vanaf Chrome versie 64 zit de mogelijkheid om de Accessibility Tree te bekijken standaard in de Chrome Devtools verwerkt. Via het Accessibility tabblad kun je de Accessibility Tree doorlopen en zien hoe elementen binnen je website door een screenreader zullen worden geïnterpreteerd.

accesstree_mockup.png

Contrast ratio debugging

 

Voor het debuggen van de contrast ratio dien je op het moment van schrijven (Chrome versie 64) eerst nog wat settings in Chrome aan te passen. Dit doe je door naar chrome://flags/#enable-devtools-experiments te gaan en deze op “Enabled”  te zetten.

 Ga vervolgens naar de Settings van Chrome Devtools en navigeer naar Experiments. Druk vervolgens 6x op shift om alle experimentele opties te tonen en vink de optie ‘Color contrast ratio line in color picker` aan. Herstart Chrome.

 Je kunt nu in de Chrome Devtools bij een kleur zien of deze genoeg contrast ratio heeft ten opzichte van de achtergrond kleur.

Contrast ratio debugging

Genereer een rapport van je website

 

Binnen Chrome Devtools via het tabblad Audits kan je op 4 gebieden (PWA, Performance, Best Practices en Accessibility) een rapport laten genereren. Dit gaat op basis van Lighthouse. In het rapport krijg je een lijst verbeterpunten/aanbevelingen met uitleg hoe je het kunt verbeteren en een score tussen 0/100.

Internet voor iedereen

Internet voor iedereen

Het internet is een openbare voorziening. Iedereen heeft recht om er gebruik van te maken, ook mensen met een beperking. Door te zorgen dat websites toegankelijk zijn kan iedereen ze gebruiken en bezorg je ze een Nice Day!

Tick, tock, tick, tock..