Workshop Maak je website toegankelijk

maak je website toegankelijk
voor alle doelgroepen
Vandaag
•
•
•
•
•
•
•
•
Even voorstellen
Waarom toegankelijkheid
Doelgroepen
Toegankelijke websites
Voorbeelden
Aandachtspunten
Tools en checks
Aan de slag!
Even voorstellen
• Marijn Tijhuis
– 27 / Nijmegen / Nijmegen / Utrecht
– Academie Digitale Communicatie
– Webdesigner / webdeveloper
• Mediamaal
– Communicatie en implementatie
– Verandercommunicatie, Diversiteit en Toegankelijkheid
– Drempels Weg
Waarom toegankelijkheid?
toe·gan·ke·lijk bn
1 te betreden; bereikbaar
2 bereid toegang te geven
(www.vandale.nl)
Voor alle doelgroepen
• Iedereen!
• Beperking
– Visueel
– Motorisch
– Auditief
• Maar ook
– Snel moe
– Slecht zien
– Moeite met lezen
– Oude PC
– iPhone
Nog meer voordelen
•
•
•
•
•
Zoekmachines
Onderhoudbaar
Snelheid
Schaalbaarheid
Klaar voor de toekomst
– Inter operabiliteit
– Wetgeving
Wat is een toegankelijke website
•
•
•
•
•
Alternatief voor visuele informatie
Scheiding inhoud en presentatie
Bruikbaar zonder extra techniek
Bruikbaar met hulpmiddelen
Toegankelijkheid raakt gebruiksvriendelijkheid
• Waarmerk DrempelVrij
– Prioriteit 1 (16 richtlijnen)
– Prioriteit 2 (30 richtlijnen)
• Webrichtlijnen (125 richtlijnen)
Toegankelijke websites
• Albert.nl Drempels Weg (mediamaal archief)
• Klik hier (over zinvolle linkteksten en skip navigatie)
• Alt teksten BBC Click (o.a. over alt teksten)
Technisch verhaal?
•
•
•
•
•
Niet alleen
Redactioneel
Kleuren
Leesniveau
Gebruiksvriendelijkheid
Aandachtspunten
•
•
•
•
•
•
•
•
Alt teksten
Relatieve tekstgrootte
Scheiding inhoud en presentatie
Koppen
Links
Kleuren
Javascript / Flash
Video
Aandachtspunten
alt teksten
Aandachtspunten
• Alt teksten
– Wat is er te zien
– Zinvol
– Breder dan alleen afbeeldingen
• Tabellen
• Grafieken
• Video
– Wat doet een knop
tools:
Web developer toolbar
Aandachtspunten
• Relatieve tekstgrootte
relatieve tekstgrootte
Aandachtspunten
• Relatieve tekstgrootte
– Maak het mogelijk tekst te vergroten
– Achtergrond en voorgrond kleuren
– Knoppen en formulieren
–
A
AA
Aandachtspunten
• Scheiding inhoud en presentatie
scheiding inhoud en presentatie
Aandachtspunten
• Scheiding inhoud en presentatie
– Basis toegankelijkheid
– Controle over je inhoud
tools:
Web developer toolbar
Opera browser
Aandachtspunten
• Koppen
koppen
Aandachtspunten
• Koppen
– Hiërarchie
– Scanbaar
– Zoekmachines
– Maar ook
•
•
•
•
Lijsten
Tabellen
Afkortingen
Citaten
tools:
Web developer toolbar
Aandachtspunten
• Links
links
Aandachtspunten
• Links
– Zelfde venster
– Zinvolle naam
• Klik hier
• URL
Aandachtspunten
• Kleuren
kleuren
Aandachtspunten
• Kleuren
– Betekenis
– Contrast
– Kleurenblindheid
tools:
We are color blind
Color contrast check
Aandachtspunten
• Javascript / Flash
javascript / flash
Aandachtspunten
• Javascript / Flash
– Geen uitgangspunt
• “unobtrusive”
– Ondersteunend
tools:
Web developer toolbar
Lynx viewer
Aandachtspunten
• Video
video
Aandachtspunten
• Video
– Geluid
– Transcriptie
– Ondertiteling
– Gebarentolk
tools:
Toegankelijke video
Overheids Media Player
aan de slag
Handig
•
•
•
•
•
•
•
•
•
Firefox Web Developer toolbar https://addons.mozilla.org/en-US/firefox/addon/60
Color contrast analyser http://juicystudio.com/services/luminositycontrastratio.php
Accessibility Lynx Viewer https://www.accessibility.nl/internet/tools/lynxviewer
W3C Validator http://validator.w3.org/
Toegankelijke video http://www.toegankelijkevideo.nl/
Opera http://www.opera.com
Webrichtlijnen Quickscan http://www.webrichtlijnen.nl/toetsen/
Overheids Media Player http://www.minvws.nl/video/default.asp
Accessibility leesniveau https://www.accessibility.nl/internet/tools/leesniveau_tool
Vragen?
Marijn Tijhuis
Mediamaal
[email protected]
030 275 95 75
web mediamaal.nl
linkedin linkedin.com/in/marijntijhuis
twitter @marijntijhuis