Je tabt door een formulier. Na drie keer op Tab drukken weet je niet meer waar je bent. Er is geen rand, geen kleurverandering, geen enkel teken dat een element focus heeft. Zonder focusindicator is het lastig navigeren. In dit artikel leg ik uit hoe een focusindicator werkt, waarom die zichtbaar moet zijn en hoe […]
De volgorde van content op een webpagina werkt net zoals de volgorde van bladzijden in een boek. Als je de pagina’s door elkaar husselt, snap je het verhaal niet meer. Op een website gebeurt eigenlijk hetzelfde als de volgorde in de code niet klopt. De volgorde van je content in de code bepaalt wat een […]
Een verkeerd ingevuld veld krijgt een rode rand. De knop om te bevestigen is groen, de knop om te annuleren rood. Voor jou ziet dat er duidelijk uit. Maar wie kleuren niet goed kan onderscheiden, mist de boodschap als de kleur wegvalt. In dit artikel leg ik uit wanneer kleurgebruik een toegankelijkheidsprobleem wordt en hoe […]
Je zoekt een specifieke pagina op een website. De navigatie heeft tientallen menu-items en je hebt geen idee waar je moet kijken. Had er maar een zoekfunctie gezeten. Of een sitemap. Dat is precies het punt: bezoekers moeten altijd via minimaal twee manieren een pagina kunnen vinden. In dit artikel leg ik uit waarom je […]
Iemand zoomt je website in naar 400%. De tekst past niet meer op het scherm. Woorden overlappen elkaar, knoppen verdwijnen en scrollen moet ineens in twee richtingen. Dat werkt niet. Je website hoort goed te werken bij het vergroten van tekst, een andere schermoriëntatie en aangepaste tekstinstellingen. Dit valt onder vier succescriteria van de richtlijnen […]
Weet jij wat er in het tabblad staat als je jouw eigen website opent? In het tabblad staat je paginatitel. Veel websites tonen daar alleen de naam van de website, of nog erger: “Nieuwe pagina”. Dat helpt helemaal niemand. In dit artikel leg ik uit wat een goede paginatitel is, hoe je die instelt in […]
Je hoeft geen WCAG-expert te zijn om toegankelijkheidsproblemen te kunnen vinden. Veel van de meest voorkomende fouten ontdek je al met een paar eenvoudige stappen. Zonder speciale kennis en in minder dan vijf minuten per test. De problemen die je met deze tests kan vinden raken echte mensen: In dit artikel laat ik je wat […]
Je draait een scan op je website en het resultaat is: nul fouten. Groen vinkje. Score 100. Dan is je website toch toegankelijk? Nee, helaas. Automatische tools vinden maar een klein deel van de echte problemen. In dit artikel leg ik uit wat automatisch testen wél en niet kan, welke tools handig zijn en waarom […]
Niet iedereen gebruikt een muis of trackpad om een website te bedienen. Mensen met een tremor, RSI, dwarslaesie of een visuele beperking zijn afhankelijk van het toetsenbord of hulpmiddelen die toetsaanslagen gebruiken. Als een website daar niet op is ingericht, wordt het voor hen onbruikbaar. Toetsenbordtoegankelijkheid betekent dat je alle functies van een website kunt […]
WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), of ARIA, is een specificatie van de W3C. Het beschrijft een set attributen (rollen, toestanden en eigenschappen) die je aan HTML kunt toevoegen om webcontent toegankelijker te maken. Hulptechnologie zoals een schermlezer gebruikt deze attributen om te begrijpen wat een element is en doet. Denk daarbij […]
Lichtgrijze tekst op een witte achtergrond. Het oogt misschien strak, maar als het contrast te laag is wordt het lezen van de tekst voor veel mensen lastig of zelfs onmogelijk. Denk aan iemand met verminderd zicht, kleurenblindheid of gewoon felle zon op het scherm. In dit artikel leg ik uit wat kleurcontrast is, welke eisen […]
Formulieren spelen een belangrijke rol op een website: ze zorgen dat je kunt inloggen, bestellen, contact opnemen of solliciteren. Maar voor veel mensen zijn formulieren een frustrerende ervaring. Labels ontbreken, foutmeldingen zijn onduidelijk en het is niet altijd duidelijk wat je moet invullen. Dit artikel laat je zien hoe het anders kan. Duidelijke en beschrijvende […]
Wil je weten of een PDF toegankelijk is? Dan is het Matterhorn Protocol jouw beste vriend. Dit testmodel controleert of PDF’s voldoen aan de regels van PDF/UA. Wat zit er in het Matterhorn Protocol? Het protocol bevat 31 checkpoints met 136 punten. Deze punten dekken alle technische eisen van PDF/UA-1 af. Zo werkt het testen: […]
Stel je voor: iemand bezoekt jouw website met een schermlezer en hoort alleen maar “Knop, link, afbeelding, link”. Ze hebben geen idee wat deze elementen doen of waar ze voor dienen. Best frustrerend, toch? Elk element dat betekenis heeft, of waar gebruikers mee kunnen interacteren, heeft een toegankelijke naam nodig. Zo kan een schermlezer duidelijk […]
Als je een website gebruikt zonder dat je het scherm kunt zien. Hoe weet je dan: In dit artikel leg ik uit hoe je met semantische HTML de structuur van je pagina vastlegt in de code. Dat maakt je content begrijpelijk voor iedereen, ook voor mensen die hulptechnologie gebruiken. Dit valt onder succescriterium 1.3.1 Info […]
Het WCAG-niveau en de status in een toegankelijkheidsverklaring lijken op elkaar, maar betekenen toch echt iets heel anders. Het verschil zit in de focus: In dit artikel leg ik het verschil verder uit. WCAG-niveau De richtlijnen voor toegankelijkheid van webcontent (WCAG) zijn internationale richtlijnen van het World Wide Web Consortium (W3C). Deze helpen je om websites en andere […]
Een duidelijke link helpt bezoekers te begrijpen waar ze naartoe gaan als ze klikken. Dit is extra belangrijk voor mensen die een schermlezer gebruiken en mensen die een cognitieve beperking hebben. Links hebben verschillende functies: Correct gebruik van links is dus belangrijk voor toegankelijkheid en gebruiksvriendelijkheid. Linktekst schrijven Zorg dat de linktekst het doel van […]
Naast YouTube is Vimeo een veelgebruikt platform voor het insluiten van filmpjes op websites. In dit artikel lees je hoe je een Vimeo-filmpje toegankelijk kunt insluiten op een webpagina. Dit artikel is een aanvulling op het artikel over toegankelijke filmpjes en geluidsfragmenten en het artikel over YouTube-filmpjes toegankelijk insluiten. De insluitcode Met een insluitcode kun […]
Informatie delen via een PDF is tegenwoordig (nog) heel gewoon. Maar wat als die PDF’s niet toegankelijk zijn voor iedereen? Bijvoorbeeld mensen die een schermlezer gebruiken, zoals voorleessoftware of een brailleleesregel. In dit artikel lees je hoe je PDF’s toegankelijk maakt voor iedereen. Met Adobe Acrobat Pro DC kun je zelf toegankelijkheidsproblemen oplossen. Dit programma is […]
Google Maps is een veelgebruikt platform voor het weergeven van een locatie op een website. In dit artikel lees je hoe je Google Maps toegankelijk kunt insluiten op een webpagina. De insluitcode Met een insluitcode kun je Google Maps op een webpagina plaatsen. De code bestaat uit een <iframe>-element met daarin de URL van de […]
Schermlezers vertalen je website naar gesproken tekst of braille. Maar om dat goed te doen, hebben ze informatie nodig: wat is dit element, hoe heet het en wat is de huidige toestand? Zonder die informatie weet iemand niet op welke knop diegene klikt, wat er in een formulierveld moet, of een selectievakje aangevinkt is. Dit […]
Filmpjes maken content begrijpelijker en aantrekkelijker. Maar een ingesloten YouTube-filmpje is niet automatisch toegankelijk. De mediaspeler moet goed zijn ingesteld, het filmpje moet ondertiteld zijn en de insluitcode moet kloppen. In dit artikel lees je hoe je een YouTube-filmpje toegankelijk kunt insluiten op een webpagina. Dit artikel is een aanvulling op het artikel over toegankelijke […]
Koppen maken een tekst overzichtelijk. Ze zien er vaak wat anders uit dan gewone tekst: ze hebben grotere letters en zijn vetgedrukt. Zo kun je een pagina snel scannen. Maar dat werkt alleen als je het scherm kunt zien. Software moet de structuur ook kunnen begrijpen. Pas dan kan iemand die een schermlezer gebruikt een […]
Voorleessoftware kan tekst omzetten in spraak. Het gebruikt hier verschillende stemmen voor. Iedere stem is gemaakt om in een bepaalde taal te spreken. Om te bepalen in welke taal er moet worden gesproken, is voorleessoftware afhankelijk van taal die in de code is vastgelegd. Het vastleggen van de taal in de code heeft meerdere functies: […]
Met filmpjes en geluidsfragmenten kun je informatie op een snelle en eenvoudige manier overbrengen. Maar deze media zijn niet door iedereen goed te gebruiken, bijvoorbeeld als iemand niet (goed) kan horen of zien door een functiebeperking. Zorg dus altijd voor een toegankelijk alternatief. Ook voor mensen zonder functiebeperking is zo’n alternatief vaak handig. Zo kan […]
Op websites staan vaak blokken met content die op iedere pagina terugkomen, zoals een logo, een zoekveld en een navigatie met een lijst van links. Mensen die alleen het toetsenbord gebruiken moeten eerst door deze blokken navigeren voordat ze bij de hoofdcontent van de webpagina komen. En dat op iedere pagina opnieuw. In dit artikel […]
Tabellen maken het makkelijk om informatie te vergelijken. Dit werkt alleen als de tabel goed is opgebouwd. Dan kan iedereen de tabel gebruiken, ook mensen met een schermlezer of brailleleesregel. Correct gebruik van tabellen is dus belangrijk voor toegankelijkheid en gebruiksvriendelijkheid. Dit valt onder succescriterium 1.3.1 Info en relaties. In dit artikel staan handvatten voor […]
Afbeeldingen maken een pagina aantrekkelijker en begrijpelijker. Maar niet iedereen kan afbeeldingen zien. Mensen die een schermlezer gebruiken, zijn afhankelijk van een tekstalternatief. Dat is een korte beschrijving die dezelfde informatie overbrengt als de afbeelding. Tekstalternatieven hebben meerdere functies: In dit artikel staan handvatten voor het toevoegen van een tekstalternatief aan een afbeelding zoals een […]
In Nederland heeft ongeveer 25% van de bevolking een vorm van functiebeperking. Deze groep bestaat onder andere uit mensen met een auditieve beperking, cognitieve of neurologische beperking, fysieke of motorische beperking, visuele beperking of spraakbeperking. Het is moeilijk om de echte cijfers te bepalen. Veel cijfers zijn een schatting en er is een overlap in […]