{"id":18984,"date":"2026-03-26T12:01:03","date_gmt":"2026-03-26T11:01:03","guid":{"rendered":"https:\/\/www.typografics.be\/?p=18984"},"modified":"2026-03-30T15:10:12","modified_gmt":"2026-03-30T13:10:12","slug":"toegankelijk-ontwerp-waarom-je-oma-en-je-conversie-je-dankbaar-zullen-zijn","status":"publish","type":"post","link":"https:\/\/www.typografics.be\/en\/blog\/toegankelijk-ontwerp-waarom-je-oma-en-je-conversie-je-dankbaar-zullen-zijn\/","title":{"rendered":"Toegankelijk ontwerp: waarom je oma (en je conversie) je dankbaar zullen zijn"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Laten we de pleister er meteen af trekken: design is geen ‘pretty picture’ wedstrijd. Als ervaren rot, en big believer in functioneel ontwerp, zie ik te vaak designs die vooral willen glimmen en opvallen voor de socials. Wel vaak heel aantrekkelijke visual candy<\/em>, ik kan daar ook wel jaloers op zijn\u2026 Maar de realiteit? Die is diverser, rommeliger en vooral: lucratiever dan je denkt.<\/p>\n\n\n\n

<\/p>\n\n\n\n

De mythe dat toegankelijkheid (accessibility) je ontwerp ‘lelijk’ maakt, is de grootste onzin sinds de komst van crocs met sokken. ‘Mooi’ is waardeloos als het onbruikbaar is. Sterker nog, door 15% tot 20% van de wereldbevolking met een beperking uit te sluiten, laat je simpelweg een gigantische zak geld op tafel liggen. Toegankelijk ontwerp is geen beperking; het is simpelweg robuust <\/em>en functioneel<\/em> ontwerp dat je conversie door het dak jaagt.<\/p>\n\n\n\n

<\/div>\n\n\n\n

De ‘Olifant in de Kamer’: De EAA 2025<\/strong><\/p>\n\n\n\n

De European Accessibility Act (EAA) 2025<\/strong> komt eraan en nee, je kunt je niet meer verstoppen achter een hippe stagiair of een ‘we doen het later wel’ mindset. Sinds 2025 is digitale toegankelijkheid een harde wettelijke eis.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Wie moeten er nu echt aan geloven?<\/strong><\/p>\n\n\n\n

    \n
  • Overheidsinstanties en gesubsidieerde clubs (die voor meer dan 50% aan het infuus van de staat hangen).<\/li>\n\n\n\n
  • Organisaties onder overheidsbestuur en hun directe leveranciers.<\/li>\n\n\n\n
  • Aanbieders van essenti\u00eble diensten aan consumenten.<\/li>\n<\/ul>\n\n\n\n

    <\/p>\n\n\n\n

    De “Get Out of Jail Free” kaart (met kleine lettertjes):<\/strong><\/p>\n\n\n\n

    Onevenredige last:<\/strong> Organisaties kunnen een uitzondering aanvragen als de aanpassingen een te zware (financi\u00eble) last vormen, maar dit moet zeer goed onderbouwd worden.<\/p>\n\n\n\n

    Micro-ondernemingen:<\/strong> Minder dan 10 werknemers \u00e9n een omzet onder de 2 miljoen euro.<\/p>\n\n\n\n

    Puur B2B:<\/strong> Producten die de consumentenmarkt nooit raken.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    Je gebruiker? Dat ben jezelf (en iedereen)<\/strong><\/h2>\n\n\n\n

    Digitale toegankelijkheid wordt vaak ten onrechte gezien als iets dat uitsluitend bedoeld is voor mensen met een permanente handicap, terwijl het in werkelijkheid de bruikbaarheid voor iedereen verbetert. Inclusive design houdt namelijk niet alleen rekening met permanente medische beperkingen, maar ook met tijdelijke en situationele uitdagingen. Een digitaal product dat makkelijk met \u00e9\u00e9n hand te bedienen is, helpt bijvoorbeeld niet alleen iemand die fysiek een arm mist, maar is net zo goed onmisbaar voor iemand met een tijdelijk gebroken arm of een ouder die op dat moment een baby vasthoudt. Daarnaast ervaart vrijwel iedereen weleens situationele beperkingen, zoals de noodzaak voor een hoog kleurcontrast bij het aflezen van een telefoonscherm in fel zonlicht, of het aanzetten van ondertiteling in de trein omdat men geen oortjes bij zich heeft. Dit fenomeen, waarbij het wegnemen van barri\u00e8res voor een specifieke doelgroep uiteindelijk resulteert in een aangenamere, veiligere en effici\u00ebntere ervaring voor de voltallige bevolking, staat bekend als het ‘curb-cut effect’.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    Kleur: De strijd tussen RGB, CMYK en Contrast<\/strong><\/h2>\n\n\n\n

    Kleur is de ziel van je merk, maar zonder contrast is het slechts ruis. Begrijp de basis: RGB<\/strong> (Rood, Groen, Bla<\/p>\n\n\n\n

    uw) is je additieve model voor schermen (licht), terwijl CMYK<\/strong> je subtractieve model is voor print (inkt). De uitdaging ontstaat wanneer je die twee werelden moet matchen zonder de leesbaarheid op te offeren.<\/p>\n\n\n\n

    Een hippe lichtgrijze tekst op een witte achtergrond is geen design-keuze, het is visuele marteling. Als de gebruiker moet turen, ben je hem kwijt. Gebruik deze tools om je ratio’s te fixen:<\/p>\n\n\n\n

    <\/p>\n\n\n\n

      \n
    • WebAIM Contrast Checker:<\/strong> De absolute basis voor elke web-flow.<\/li>\n\n\n\n
    • Tanaguru Contrast Finder:<\/strong> Voor als je een alternatief zoekt dat w\u00e9l voldoet.<\/li>\n\n\n\n
    • Contrast app (macOS):<\/strong> Een snelle tool direct in je toolbar. Geen excuses meer.Mobile First? White Space is je beste vriend<\/strong><\/li>\n<\/ul>\n\n\n\n

      Op een mobiel scherm is je ‘real estate’ beperkt, maar dat betekent niet dat je alles moet dichtstouwen. Integendeel. De proporties, layout en het gebruik van white space bepalen of je interface een plezier is om te gebruiken of een frustrerende ‘clutter’ bende.<\/p>\n\n\n\n

      <\/p>\n\n\n\n

      Harde cijfers voor je grid:<\/strong><\/p>\n\n\n\n

        \n
      • Margin:<\/strong> Houd minimaal 15px<\/strong> aan beide zijden aan.<\/li>\n\n\n\n
      • Top Navigatie:<\/strong> Mik op een hoogte van 44-56 px<\/strong>.<\/li>\n\n\n\n
      • Dikke-vingers-vriendelijk:<\/strong> Geef je content ademruimte. Verhoog je line heights<\/em> en element spacing<\/em>. White space helpt de pagina ‘ademen’ en voorkomt dat mensen per ongeluk op het verkeerde klikken.<\/li>\n<\/ul>\n\n\n\n

        De interactie-check:<\/strong> Functionaliteiten die een sleepbeweging (dragging<\/em>) vereisen, moeten \u00e1ltijd een fallback hebben. Zorg dat alles ook bedienbaar is met een simpele klik of tik. Niet iedereen heeft de motoriek voor complexe drag-interacties; houd het inclusief.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Consistentie: De UX-lijm<\/strong><\/h2>\n\n\n\n

        Consistentie is de reden dat een gebruiker niet in paniek raakt op je derde subpagina. We splitsen dit in twee smaken:<\/p>\n\n\n\n

          \n
        1. Visuele Consistentie:<\/strong> Gebruik een uniform kleurenpalet, vaste typografie (stijl, grootte, gewicht) en een strak grid-systeem.<\/li>\n\n\n\n
        2. Functionele Consistentie:<\/strong> Interacties moeten voorspelbaar zijn. Een knop moet zich overal gedragen als een knop.<\/li>\n<\/ol>\n\n\n\n

          De Conversie-Killer: Formulierwaanzin<\/strong> Stop met het pesten van je gebruikers door ze herhaaldelijk dezelfde data te laten invoeren. Dit is waar je conversie sterft.<\/p>\n\n\n\n

          Een gebruiker moet bij elke stap van een formulier opnieuw zijn naam, e-mail en adres invullen, terwijl hij al ingelogd is of dit in stap 1 al heeft gedaan. Resultaat: Afhakers.<\/strong><\/p>\n\n\n\n

          Gegevens die al bekend zijn, worden automatisch ingevuld in de volgende stappen. Dit bespaart tijd en vermindert de kans op fouten aanzienlijk. Resultaat: Conversie.<\/strong><\/p>\n\n\n\n

          <\/div>\n\n\n\n

          De ‘Helper’ Tech<\/strong><\/h2>\n\n\n\n

          Tijd voor een reality check: niet iedereen ziet je design zoals jij het ziet. Assistive technologies zijn de bril waardoor een groot deel van je publiek kijkt. Met deze ingrepen kan je vandaag al aan de slag.<\/p>\n\n\n\n

          <\/p>\n\n\n\n

            \n
          • Closed Captioning:<\/strong> Voortaan altijd doen. Ondertiteling is er niet alleen voor slechthorenden, maar ook voor die student in een overvolle, stille trein die jouw video-content wil consumeren zonder oortjes.<\/li>\n\n\n\n
          • Screen Readers (Adobe & Chrome):<\/strong> Software zoals ChromeVox leest je teksten voor. Pro-tip: Gebruik NaturalReader<\/strong> in Chrome om je eigen teksten te controleren. In Adobe Reader kun je zelfs de stem aanpassen en de Words Per Minute (WPM)<\/strong> snelheid finetunen. Dit is niet alleen voor blinden; het is een geweldige tool voor multitasking<\/em>.<\/li>\n\n\n\n
          • Screen Magnifiers:<\/strong> Native ingebouwd in je browser. Gebruikers vergroten je content extreem. Blijft je layout dan staan of stort je kaartenhuis in elkaar?<\/li>\n\n\n\n
          • Google Lighthouse<\/strong>: biedt een gedetailleerd rapport dat aangeeft hoe goed een website voldoet aan de WCAG-normen, en biedt aanbevelingen voor verbetering.<\/li>\n\n\n\n
          • Switch Controls:<\/strong> Voor mensen die geen muis of touch kunnen gebruiken. Jouw navigatiestructuur moet logisch zijn voor deze sequenti\u00eble bediening. Met enkel Tab en Enter moet je overal heen kunnen.<\/li>\n<\/ul>\n\n\n\n
            <\/div>\n\n\n\n

            Vergeet je digitale documenten niet: maak ook je PDF\u2019s toegankelijk<\/strong><\/strong><\/h2>\n\n\n\n

            Inclusief ontwerp stopt niet bij webpagina\u2019s, ook PDF-documenten moeten toegankelijk en gebruiksvriendelijk zijn voor iedereen. Denk aan duidelijke structuur met correcte koppen, voldoende kleurcontrast, leesbare typografie en logisch opgebouwde inhoud. Voorzie alternatieve teksten bij afbeeldingen, zorg dat het document navigeerbaar is met een toetsenbord en dat schermlezers de inhoud correct kunnen interpreteren. Toegankelijke PDF\u2019s zijn essentieel voor gebruikers met visuele of motorische beperkingen \u00e9n dragen bij aan een betere algemene gebruikservaring. <\/p>\n\n\n\n

            <\/div>\n\n\n\n
            \n
            \n
            \"\"<\/figure>\n<\/div>\n\n\n\n
            \n

            Download: een handige gids en checklist rond toegankelijk<\/strong><\/strong>e PDF’s<\/h4>\n\n\n\n

            Wil je zeker zijn dat jouw PDF\u2019s voldoen aan de richtlijnen voor toegankelijk design en de European Accessibility Act (EAA)? Download dan onze praktische checklist en uitgebreide gids voor toegankelijk PDF-ontwerp en ga meteen aan de slag.<\/p>\n\n\n