Toegankelijkheid en responsive design Uitleg Wat is toegankelijk webdesign? Toegankelijkheid in webdesign betekent dat iedereen je website goed kan gebruiken β€” ook mensen met: een visuele beperking (bijv. kleurenblindheid, slechtziendheid) motorische beperking (moeite met muisgebruik) auditieve beperking (bijv. doven of slechthorenden) cognitieve of leerproblemen (bijv. dyslexie) een trage internetverbinding of ouder apparaat πŸ“£ β€œAls je ontwerp alleen werkt voor de ideale gebruiker, dan werkt het niet goed.” Toegankelijkheid gaat dus over inclusie : niemand wordt buitengesloten vanwege technologie, beperking of situatie. Waarom is dit belangrijk? 1 op de 5 mensen heeft een tijdelijke of permanente beperking Toegankelijke websites zijn gebruiksvriendelijker voor iedereen In veel landen zijn overheden en onderwijsinstellingen wettelijk verplicht om toegankelijk te ontwerpen (WCAG) Een site die toegankelijk is: vergroot je bereik laat zien dat je rekening houdt met anderen is vaak beter gestructureerd en duidelijker Basisprincipes van toegankelijkheid Hieronder staan enkele richtlijnen die bijdragen aan toegankelijkheid: Richtlijn Waarom? Voorbeelden Goede contrasten Mensen met slecht zicht kunnen alles goed lezen Donkere tekst op lichte achtergrond Grote, duidelijke letters Beter leesbaar voor iedereen Minimaal 16px voor normale tekst Alternatieve tekst bij afbeeldingen Gebruikers met screenreaders kunnen inhoud begrijpen Man met hond Toetsenbord-navigatie Niet iedereen gebruikt een muis Menus kunnen via Tab-toets bereikt worden Duidelijke koppenstructuur Screenreaders lezen koppen in logische volgorde Gebruik

,

, enz. correct Geen informatie alleen via kleur Kleurenblinde gebruikers missen anders informatie Niet alleen rood = fout; gebruik ook een icoon of tekst πŸ’‘ Websites zoals webaim.org of accessibility-developer-guide.com geven goede richtlijnen en voorbeelden. Wat is responsive design? Responsive design betekent dat een website zich automatisch aanpast aan het schermformaat van het apparaat. Dat kan zijn: πŸ–₯️ desktop πŸ“± mobiel πŸ’» tablet Waarom is dat belangrijk? Meer dan 60% van het internetgebruik gebeurt via mobiele apparaten Als je site niet goed schaalt, haken gebruikers af Een goed mobiel ontwerp betekent: eenvoudig, groot genoeg, overzichtelijk Wat verandert er meestal bij kleinere schermen? Het menu wordt een hamburgermenu Elementen worden onder elkaar gezet i.p.v. naast elkaar Tekst en knoppen worden groter en beter klikbaar Onnodige of grote elementen worden verborgen 🧠 Ontwerp dus mobile-first of test altijd hoe je ontwerp eruitziet op mobiel. Test jezelf: is jouw ontwerp toegankelijk? Hieronder een checklist: βœ… Is je tekst goed leesbaar (kleur, grootte)? βœ… Heb je geen informatie die alleen via kleur wordt overgebracht? βœ… Werken knoppen en links ook met toetsenbord? βœ… Heb je afbeeldingen voorzien van tekst of beschrijving? βœ… Is je ontwerp goed te gebruiken op mobiel Γ©n desktop? Gebruik ook gratis tools zoals: wave.webaim.org – toegankelijkheidsanalyse Chrome DevTools > β€œToestellen” – test je ontwerp op mobielformaat Oefeningen Opdracht A – Ontwerpanalyse: toegankelijk of niet? Kies een bestaande website. Analyseer de volgende punten: Zijn de lettertypes goed leesbaar? Is er genoeg contrast tussen tekst en achtergrond? Kan je de site met alleen het toetsenbord bedienen? Worden afbeeldingen beschreven of genegeerd? Hoe ziet de site eruit op mobiel? Werk je bevindingen uit in Β±150 woorden. Opdracht B – Je eigen ontwerp verbeteren Neem je eigen wireframe of ontwerpstijl (van hoofdstuk 3 of 4) en: Controleer de toegankelijkheid (kleur, tekst, structuur) Teken een mobiele versie van je ontwerp (layout herschikken!) Schrijf kort op wat je hebt aangepast en waarom