Tips en tools
Praktische tips, tools en handleidingen om de digitale toegankelijkheid van je website te verbeteren. Van kleurcontrast tot koppenstructuur.
Van kleurcontrast en koppenstructuur tot handige browsertools: hier verzamelen we praktische hulpmiddelen voor digitale toegankelijkheid.
Gebruik deze tips om zelf eerste controles te doen en verbeteringen door te voeren. Een tool geeft je een aanwijzing, geen volledig toegankelijkheidsonderzoek; combineer automatische checks daarom met handmatig testen.
Begin met de WCAG Radar voor controles in je browser. Wil je weten hoe je website als geheel ervoor staat, lees dan over een volledige toegankelijkheidsaudit.
Is jouw e-mailhandtekening digitaal toegankelijk?
Ik was bij een presentatie van Martine Baadenhuijsen (allinclusiveatwork.nl). Zij is blind en vertelde hoe vaak ze e-mailhandtekeningen tegenkomt die niet toegankelijk zijn.
Browserstack vs Proper Access
Deze week deed ik een klein experiment. Ik nam een proefabonnement op de betaalde toegankelijkheidstestfunctie van Browserstack en testte twee pagina’s van een website waar mijn team momenteel aan werkt.
Button vreet de kop op
We zijn fan van de accordeon. Nee, niet het blaasbalginstrument dat klinkt als een complete Duitse jodelband. Ik heb het over de elegante digitale variant (die gelukkig geen muziek maakt): in- en uitklapbare secties waarmee je een bak informatie overzichtelijk kunt presenteren, door alles wat niet direct nodig is in ingeklapte accordeons te verbergen.
Instructie: hoe test ik kleurcontrast?
Kleurcontrast is een van de meest voorkomende toegankelijkheidsproblemen die we tegenkomen in audits. Lichtgrijze tekst op een witte achtergrond, pastelkleurige knoppen, subtiele placeholdertekst, het ziet er misschien strak uit, maar voor honderdduizenden mensen met een visuele beperking is het simpelweg niet te lezen.
Hoe herken je niet-getagde tekst in een PDF
PDF’s zijn een van de meest voorkomende struikelblokken bij digitale toegankelijkheid. Een PDF kan er perfect uitzien terwijl een schermlezer er niets mee kan. De oorzaak is vaak niet-getagde tekst: tekst die visueel gewoon op de pagina staat, maar technisch niet is opgenomen in de tagstructuur van het document.
Google Lighthouse als toegankelijkheidstool
Vijf jaar geleden werkte ik als webontwikkelaar en wist ik veel minder over digitale toegankelijkheid dan nu. In 2019 leverde ik een website op die mijn teamleider wilde laten testen op het voldoen aan de WCAG-richtlijnen. Ik was ervan overtuigd dat de website toegankelijk was. Drie jaar daarvoor had ik mijn opleiding Informatica aan de Hogeschool van Malmö afgerond, waar aandacht werd besteed aan digitale toegankelijkheid. Ik gebruikte Google Lighthouse als testtool om de homepagina te controleren en behaalde een score van 95%. Mij kon niets gebeuren! Ik was geen moment bang dat er iets zou worden afgekeurd. Het resultaat van het toegankelijkheidsonderzoek was echter teleurstellend: 15 succescriteria onvoldoende! Sindsdien is veel gebeurd in mijn leven. Sinds dat jaar heb ik Google Lighthouse niet meer gebruikt.
Skiplinks issue op mijn Wordpress website
Op mijn WordPress-website werkte de skiplink niet op sommige pagina’s. Op deze pagina’s heb ik een externe plugin toegevoegd die andere ID’s gebruikt, waardoor de connectie tussen de skiplink in de header en het ID op de content verloren is gegaan.
Checklist toegankelijke content
Inleiding Een praktische handleiding voor het maken van digitaal toegankelijke Word-documenten. Of je nu rapporten, beleidsdocumenten of facturen maakt: met deze stappen zorg je ervoor dat iedereen je content kan lezen, ook mensen die een schermlezer gebruiken. Koppen Structuur met echte kopstijlen Koppen zijn het belangrijkste structurele onderdeel van een document. Gebruikers van schermlezers navigeren via koppen: ze springen van kop naar kop om snel te vinden wat ze nodig hebben. Daarom is het cruciaal om echte koppen te gebruiken, niet alleen grote, vette tekst. Fout: alleen vet + groot Bezoekadres Alinea (P) Keizersgracht 123, Amsterdam Postadres Alinea (P) Postbus 456, 1000 AB Amsterdam Contact Alinea (P) [email protected] | 020-123 4567 Schermlezer: "Bezoekadres" = gewone tekst, geen kop Goed: echte kopstijlen Bezoekadres Kop 2 (H2) Keizersgracht 123, Amsterdam Postadres Kop 2 (H2) Postbus 456, 1000 AB Amsterdam Contact Kop 2 (H2) [email protected] | 020-123 4567 Schermlezer: "Kop niveau 2: Bezoekadres" Waar moet een kop aan voldoen? Betekenisvol: Koppen moeten de inhoud eronder goed beschrijven. “Contact” en “Bezoekadres” zijn duidelijk. “Sectie 1” en “Sectie 2” zeggen niets. Kort: Schermlezers lezen een lijst van koppen snel op. Houd ze bondig. Overzichtelijk: Als je alleen de koppen leest, moet je al een goed idee hebben waar het document over gaat. Geen niveaus overslaan: Begin altijd met kopniveau 1 (H1) en sla geen niveaus over. Ga niet van H1 direct naar H3. Koppen maken in Word Ga naar het tabblad Start en zoek de sectie Stijlen. Kies het gewenste kopniveau: Kop 1, Kop 2, enzovoort. Je kunt bestaande tekst selecteren en daarna de kopstijl toepassen. Houd Ctrl ingedrukt om meerdere tekstdelen tegelijk te selecteren. Kopstijl aanpassen Vind je het uiterlijk van een kop niet mooi? Dat is geen reden om geen echte koppen te gebruiken. Je kunt de weergave aanpassen: Klik met de rechtermuisknop op de kopstijl in de sectie Stijlen. Kies Wijzigen. Pas lettertype, grootte, kleur en andere opties aan. Klik op OK: alle koppen van dat niveau worden automatisch bijgewerkt. Belangrijk: gebruik geen aangepaste stijl om een kop te maken, ook niet als je bij de optie “stijl gebaseerd op kop” kiest. Schermlezers herkennen aangepaste stijlen niet als koppen. Inhoudsopgave Een voordeel van echte koppen is dat je er automatisch een inhoudsopgave mee kunt maken. Ga naar het tabblad Verwijzingen en selecteer een stijl. Gebruikers kunnen nu direct naar specifieke secties springen.
Toegankelijkheidslabel ontoegankelijk plaatsen (doe dat niet!)
Wanneer je een toegankelijkheidsverklaring hebt opgesteld, kun je een label ophalen dat je op je website kunt plaatsen om de status van je website te tonen. Je vindt het label op deze pagina: https://www.toegankelijkheidsverklaring.nl/verklaringen
Tools om contrast te checken
De TPGi Color Contrast Checker is een gratis tool om te controleren of de kleuren op je website genoeg contrast hebben volgens de WCAG-richtlijnen.