Digitale toegankelijkheid waarborgen: zo doe je dat

Bij Urban Heroes geloven we in het creëren van digitale ervaringen die voor iedereen toegankelijk zijn. Aangezien diverse van onze klanten overheidsinstanties zijn, is het naleven van de Web Content Accessibility Guidelines (WCAG) niet alleen een goede gewoonte, maar vaak ook een vereiste. Onze expert op het gebied van digitale toegankelijkheid biedt praktische stappen om de digitale toegankelijkheid te verbeteren.

Digitale toegankelijkheid gaat niet alleen over compliance; het gaat over inclusiviteit. Het gaat erom dat iedereen, ongeacht hun mogelijkheden, toegang heeft tot digitale inhoud en hiermee kan omgaan. Misschien schrikt het je af om ermee aan de slag te gaan, maar sommige dingen kunnen eenvoudig worden toegepast.

Om echt toegankelijke inhoud te creëren, moeten we rekening houden met verschillende soorten beperkingen waarmee gebruikers te maken kunnen krijgen:

• Visuele beperkingen: dit omvat overwegingen voor kleurenblindheid, slechtziendheid en andere visuele uitdagingen.
• Motorische beperkingen: gebruikers kunnen moeite hebben met precieze muisbewegingen of afhankelijk zijn van toetsenbordnavigatie.
• Cognitieve beperkingen: inhoud moet duidelijk, beknopt en gemakkelijk te begrijpen zijn.
• Auditieve beperkingen: dit heeft betrekking op audiocontent, waarvoor alternatieven zoals transcripten of bijschriften nodig zijn.

De volgende gebieden zijn cruciaal voor het implementeren van WCAG-richtlijnen:

1. Kleur- en contrast

Kleur speelt een belangrijke rol bij toegankelijkheid. Het gaat niet alleen om esthetiek; het gaat om leesbaarheid.

• Contrastverhoudingen: de contrastschaal loopt van 1:1 tot 21:1. Minimale verhoudingen zijn 4.5:1 voor normale tekst en 3:1 voor grote tekst. Voor AAA-toegankelijkheidsniveau streef je naar 7:1 en 4.5:1. Dit geldt voor alle tekst, aangezien de belangrijkheid ervan niet bekend is voordat je het leest.

Calculatie: relatieve luminantie is de sleutel tot het berekenen van contrast. Dit kan worden afgeleid van RGB-waarden. Als alternatief kan het gebruik van HSL (Hue, Saturation, Lightness) zaken vereenvoudigen, aangezien de berekening alleen rekening houdt met de lichtheid.

2. Animaties

Animaties kunnen boeiend zijn, maar moeten zorgvuldig worden geïmplementeerd om aan de WCAG richtlijnen te kunnen voldoen.

• Tijdslimieten: beperk animaties tot maximaal 5 seconden.
• Loopen en pauzeren: sliders moeten loopen en niet terugslippen, met een pauze-optie.
• Gebruikersinteractie: animaties die worden geactiveerd door gebruikersinteractie moeten logisch zijn en onverwachte bewegingen voorkomen.

3. Interactieve elementen

Knoppen, tooltips, invoervelden en andere interactieve elementen vereisen zorgvuldige aandacht om ervoor te zorgen dat ze voor iedereen bruikbaar zijn.

• Muisbewegingen: specifieke muisbewegingen zijn niet toegestaan als vereiste om een doel op de website te bereiken.
• Klik versus hover: het is beter om te reageren op klikken dan op hover. Een hover kan lastig navigeren zijn voor gebruikers met een beperking.
• Verborgen inhoud: verborgen inhoud wordt afgeraden, mocht dit toch toegepast worden, moet het duidelijk zijn wat er van verborgen inhoud te verwachten is.
• Minimale grootte: interactieve elementen moeten een minimale grootte hebben van 24x24px voor AA-conformiteit en 44x44px voor AAA.

4. Front-end implementatie

Dit is waar de structuur en code van je website een rol spelen, wat een aanzienlijke invloed heeft op de toegankelijkheid.

• Semantische HTML: gebruik HTML-elementen voor hun beoogde doel.
  • Headervolgorde: headers (H1, H2, etc.) moeten een logische volgorde volgen en groepen vormen met de onderliggende inhoud. Een H1 mag nooit meer dan één keer per pagina worden gebruikt en moet het begin van de paginacontent markeren.
  • Elementvolgorde: let op de volgorde van elementen zoals titels en labels in de HTML.
  • Screenreader only teksten: gebruik deze teksten om onderdelen te verduidelijken die visueel wel duidelijk zijn, maar via de code niet, door extra teksten in links en knoppen als uitleg te geven, en voor verborgen headers.
  • Groeperen van lijsten: groepeer lijsten op de juiste manier, inclusief links, kaarten, views en menu's.
  • Legenda's: gebruik aria labels of een screenreader titel voor legenda's.
  • Labels voor input: elke input moet een gelinkt label hebben via het for attribuut dat linkt naar de ID van de input. Inputs mogen nooit verborgen zijn, hoewel ze wel screenreader only verborgen mogen zijn.
• ARIA (Accessible Rich Internet Applications): hoewel ARIA krachtig kan zijn, is geen ARIA beter dan slechte ARIA. Correcte HTML-semantiek is beter dan ARIA, aangezien ARIA bepaalde content voor screenreaders kan overschrijven.
• Afbeelding alt-tekst en figcaption:
  • Gebruik alt-teksten voor niet-decoratieve afbeeldingen.
  • Gebruik figcaption voor langere beschrijvende teksten, vooral voor afbeeldingen met veel informatie zoals diagrammen.
  • Figcaption mag ook een link zijn voor externe uitleg. Als het geen link is, mag de figcaption verborgen worden via screenreader only.
• Fallback content: zorg voor fallback content als de primaire inhoud niet laadt, wat kan worden veroorzaakt door oude browsers, geen JavaScript-gebruik, het blokkeren van onderdelen of fouten aan de developer kant. Alt-tekst pakt dit probleem op bij afbeeldingen, en custom handlers kunnen worden gebruikt voor andere onderdelen zoals video's.

5. Toetsenbordnavigatie en focusbeheer

Veel gebruikers met een beperking vertrouwen op toetsenborden om websites te navigeren.

• Toetsenbordtoegankelijkheid: alle interactieve elementen moeten bereikbaar zijn via het toetsenbord. Details, links en de meeste klikbare HTML-elementen hebben dit standaard, maar aangepaste elementen kunnen het toevoegen van tabindex=0 vereisen.
• Zichtbare focus: houd de focus altijd zichtbaar.
• Focus trap: Pas indien nodig een focus trap toe om ervoor te zorgen dat gebruikers niet vast komen te zitten in een sectie.

6. CKeditor

De CKeditor, een populaire rich text editor, heeft specifieke configuraties nodig voor toegankelijkheid.

• Vet en cursief: Het gebruik van vette en cursieve tekststijlen is alleen toegestaan onder specifieke omstandigheden, aangezien verkeerd gebruik screenreaders kan verwarren. Het is het beste om deze uit de CKeditor te verwijderen en hun styling te vervangen door custom style opties.

7. Tooling

Verschillende tools kunnen helpen bij het testen en verifiëren van toegankelijkheid.

• Kleurchecker plugins: er zijn veel opties voor kleurchecker plugins in alle browsers.
• Lighthouse: standaard ingebouwd in Chrome (en beschikbaar als extensie voor Firefox), genereert Lighthouse rapporten over toegankelijkheidsfouten, niet alleen voor WCAG. Het kan niet alles controleren, maar wel veel en geeft ook suggesties voor wat je zelf kunt testen.

Het bereiken van digitale toegankelijkheid vereist inzicht in de uiteenlopende behoeften van gebruikers. Veel verbeteringen zijn eenvoudig te implementeren en zouden consistent moeten worden toegepast. Prioriteit geven aan goed kleurcontrast, simpele en intuïtieve animaties, en interactieve elementen van voldoende grootte. Semantische HTML kan de meeste screenreaderproblemen oplossen, en zorg er altijd voor dat de focus zichtbaar is en beheerd wordt. Pas ten slotte je CKeditor aan en maak gebruik van beschikbare tools voor testen en verificatie.

Door deze richtlijnen te volgen, kunnen we ervoor zorgen dat de digitale producten die we creëren niet alleen voldoen aan de eisen, maar ook echt bruikbaar en inclusief zijn voor iedereen.