Toegankelijke websites voor alle doelgroepen

937 views

Published on

Workshop over toegankelijke websites bij VGN. Door Marijn Tijhuis van Mediamaal (www.mediamaal.nl)

Probeer eens door een andere bril naar de website van je organisatie te kijken. Stel, je bent een stuk ouder en hebt geen ervaring met internet, maar je wilt wel weten welke zorg jouw kind met een beperking krijgt of wat ook alweer het telefoonnummer van de betreffende locatie is. Of je bent blind, slechtziend, doof of slechthorend. Hoe ziet voor deze doelgroepen de gemiddelde website eruit? En hoe kun je je eigen website verbeteren om ook voor deze doelgroepen toegankelijk te zijn?

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
937
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Toegankelijke websites voor alle doelgroepen

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

×