Een toegankelijk internet voor iedereen

Al jaren luidt de naam van de Brit Tim Berners-Lee als een klok in de IT-wereld. Als oprichter van het World Wide Web en grote naam achter de allereerste website (info.cern.ch) wordt hij beschouwd als het boegbeeld van het internet.

Nu, meer dan 30 jaar later, is Berners-Lee als directeur van het World Wide Web Consortium (W3C) nog steeds betrokken bij de ontwikkeling van het internet. Als hij spreekt, wordt er geluisterd. Dat maakt volgende quote net zo krachtig: “The web is for everyone and collectively we hold the power to change it. It won’t be easy. But if we dream a little and work a lot, we can get the web we want.” En dat treft, want net als hij merken we dat webtoegankelijkheid niet vanzelfsprekend is.

Beperkingen, groot of klein, zorgen ervoor dat wij allemaal het World Wide Web op een andere manier gebruiken. Personen met een visuele beperking zijn afhankelijk van een screenreader om webpagina's te bedienen. Vele websites zijn niet gebouwd om met een dergelijke tool om te gaan waardoor informatie niet meer voor iedereen bereikbaar is.

Ook tijdelijke beperkingen hebben trouwens gevolgen: Met een gebroken pols wordt je muis nutteloos. Is je licht kapot, dan kan tekst minder leesbaar zijn. Toegankelijkheid is dus zowel onmisbaar voor vele bezoekers als nuttig voor iedereen.

Om digitale kanalen voor iedereen toegankelijk en bruikbaar te maken, heeft het W3C een reeks richtlijnen opgesteld: de Web Content Accessibility Guidelines (WCAG). Door deze richtlijnen toe te passen en rekening te houden met alle gebruikers, dragen we bij aan een inclusief internet. Maar eerst moeten we ze grondig kennen. We volgden met een groep ervaren developers de opleiding digitale toegankelijkheid, gegeven door AnySurfer, om onze kennis op te frissen.

Links spinnen het World Wide Web. Zonder links is elke pagina een eiland. Daarom is het belangrijk om ze betekenisvol te maken en ze voldoende visueel te onderscheiden van gewone tekst. Een betekenisvolle link omschrijft het doel van de link. Screenreadergebruikers navigeren bijvoorbeeld via een linklijst. En een lijst die bestaat uit: 'klik hier', 'download' of 'lees meer' helpt de gebruiker niet verder. 'Download onze whitepaper' of 'lees meer over Drupal 10' dan weer wel.

Toetsenbord gebruik

Leg je muis even aan de kant en probeer eens te navigeren op het internet. Je ervaart snel dat je niet elke website met het toetsenbord kan bedienen. Waar het wel lukt, kan je met de tab-toets door de website gaan en zien welk element is geselecteerd. Elk element dat met de muis bediend kan worden, moet ook met een toetsenbord werken. Menu's en navigatie vragen meestal extra aandacht. Om die zo toegankelijk mogen te maken, gebruiken we als developers zoveel mogelijk native HTML-elementen, voegen we duidelijke focus-styles en letten we erop dat de tabvolgorde logisch is.

Semantiek

De opbouw van een pagina met beschrijvende HTML-elementen en juiste hiërarchie in kopniveau's is voor ondersteunende technologieën zoals screenreaders cruciaal. Gebruik semantische elementen daarom enkel waarvoor ze bedoeld zijn: markeer koppen als een kop, zet overzichten in een <ul> lijst en plaats enkel hoofdnavigatieblokken in een <nav> element. <span> en <div> elementen hebben geen enkele structurele of semantische rol. HTML5 landmarks zoals <header>, <footer> en <main> geven dan weer structuur en meerwaarde aan de pagina.

Accessibility tree

Elke browser bouwt voor zichzelf een accessibility tree uit de code. Ondersteunende technologieën halen die informatie op om informatie voor te lezen en aan te kondigen. In de accessibility tree heeft elke component een rol, een naam, een status en eigenschappen. Semantische HTML-elementen vullen de accessibility tree in, maar als developers kunnen we ontbrekende semantiek toevoegen of bijsturen met Accessible Rich Internet Applications attributen (ARIA). Zo kunnen we bijvoorbeeld een label aan de navigatie geven of de status van een button meegeven. ARIA-attributen horen enkel thuis op componenten met een semantische rol. Verkeerde of overbodige ARIA-attributen helpen de toegankelijkheid dan weer niet vooruit.

Kleur en contrast

Veel mensen zijn kleurenblind. Zij hebben het soms lastig letters en achtergrond van elkaar te onderscheiden. Daarom moeten wij als webdev’s zorgen voor voldoende contrast bij interactieve elementen en zeker bij tekst. Ook kunnen we erop letten om niet alleen kleur te gebruiken om informatie over te brengen. Typisch voorbeeld: een kalender waar alleen in kleur wordt aangeduid wanneer het druk is in een pretpark. Hier is een combinatie van kleur en tekst de beste keuze.

Formulieren

Een formulier is een van de voornaamste elementen om interactie te hebben met je bezoeker. Een duidelijk beschrijvend label boven elk veld, zoveel mogelijk autocomplete voorzien en correcte, omschrijvende foutmeldingen kunnen al enorm veel bijdragen tot toegankelijke formulieren. Natuurlijk moeten ook formulieren volledig met het toetsenbord te bedienen zijn en is het kleurcontrast bij de formuliervelden belangrijk.

Afbeeldingen en iconen

Je kan afbeeldingen en iconen in twee groepen indelen: spelen ze een rol om de bredere context te begrijpen of zijn ze enkel decoratief? Die eerste groep moeten afbeeldingen een alt-tekst hebben waarin beschreven staat wat er op het beeld te zien is. Decoratieve afbeeldingen kunnen via CSS worden toegevoegd of mogen een lege alt-tekst krijgen. Beelden in een teaser of grote hero afbeeldingen op een detail pagina zijn meestal puur decoratief en moeten dus een lege alt-tag hebben. Op deze manier communiceren ze geen overbodige informatie voor gebruikers van ondersteunende hulpmiddelen zoals screenreaders.

Ook leerden we dat een icoon best een tekst-label heeft. Elk icoon moet ofwel een duidelijk label krijgen of moet uit de accessibility tree worden gehaald door het icoon in een element met het ARIA attribuut aria-hidden="true" onder te brengen. Het label kunnen we in Drupal dan weer heel eenvoudig visueel verbergen door aan dat element de klasse "visually-hidden" te geven. Zo krijgen iconen de context die ze nodig hebben.

Afleiding en beweging

Het is heel belangrijk om geen inhoud te bouwen die zintuiglijke overprikkeling of concentratieproblemen kan veroorzaken. Veel flikkeringen of video’s die automatisch beginnen afspelen vermijden we best.

De controle moet altijd aan de gebruiker gegeven worden. Een gebruiker moet animaties kunnen afzetten. Video’s moeten een play- of pauzeknop krijgen. Ook met pop-ups gaan we zorgzaam en met mate om. Met uitzondering van een cookie banner, tonen we beter geen pop-up bij het inladen van de pagina. Een pop-up kan getoond worden na een actie van de bezoeker, maar mag niet zomaar onverwacht opduiken.

Toegankelijkheid is een iteratief proces. Door onderzoek, empathie en good old fashioned experience leren we meer over inclusiviteit en toegankelijke communicatie. Daarom is op tijd en stond een opleiding WCAG onmisbaar. Zo bouwen wij voor onze klanten steeds moderne en toegankelijke websites.

• WCAG requirements (success criteria) and techniques
• Richtlijnen voor Toegankelijkheid van Webcontent (Nederlandse vertaling)
• ARIA Authoring Practices Guide (APG)
• Inclusive Components (Accessible web interfaces)