Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Toegankelijkheid

980 views

Published on

Workshop about W3C guidelines and Webguidelines by the Dutch government

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

Toegankelijkheid

  1. 1. ~ Toegankelijk bouwen voor het web.
  2. 2. Agenda <ul><li>Wat is toegankelijk bouwen? </li></ul><ul><li>W3C guidelines </li></ul><ul><li>Webrichtlijnen van de Nederlandse overheid </li></ul><ul><li>Opdracht </li></ul>
  3. 3. ~ Wat is toegankelijk bouwen?
  4. 4. <ul><li>“ Ik moet al genoeg moeite doen om 80 procent van mijn klanten te bereiken. Ik maak me dus nog niet zo druk om die laatste 10 procent.” </li></ul>
  5. 5. Pro’s en Con’s <ul><li>Brede doelgroep dienen </li></ul><ul><li>Automatische zoekmachine optimalisatie </li></ul><ul><li>Snellere pagina’s </li></ul><ul><li>Crossbrowser compatibility </li></ul><ul><li>Crossplatform compatibility </li></ul><ul><li>Meer werk (max. 10%) </li></ul><ul><li>Hogere kosten voor de klant (max. 10%) </li></ul>
  6. 6. ~ W3C richtlijnen
  7. 7. W3C Richtlijnen <ul><li>Bouw </li></ul><ul><li>P1: Opmaak scheiden van Content </li></ul><ul><li>P1: Leesbare HTML (ook zonder CSS) </li></ul><ul><li>P1: Alternatieven voor fotografie (Alt-tekst) </li></ul><ul><li>P1: Alternatieven voor video (transcripts) * </li></ul><ul><li>P1: Alternatieven voor flash (tekst) </li></ul><ul><li>P1: Alternatieven voor AJAX/Javascript * </li></ul><ul><li>P1: Geen flikkerende flashapps </li></ul><ul><li>P1: Tabellen alleen voor tabulaire data </li></ul><ul><li>P1: Tabellen altijd met headers </li></ul><ul><li>P1: Zorg voor contrast in kleur (bv. links) </li></ul><ul><li>P2: Em’s i.p.v. pixels * </li></ul><ul><li>P2: Maak gebruik van Headerstructuren * </li></ul><ul><li>P2: Geen page-refreshes of redirects </li></ul><ul><li>P2: Geen pop-ups </li></ul>Voor de volledige lijst http://www.accessibility.nl/internet/richtlijnen/checklist <ul><li>P2: Lever metadata (semantiek) * </li></ul><ul><li>P2: Geef duidelijke links </li></ul><ul><li>P2: Geef altijd een sitemap </li></ul><ul><li>P2: Geef inputs altijd labels </li></ul><ul><li>P3: Geef afkortingen een <abbr> </li></ul><ul><li>P3: Geef de taal van de tekst aan (lang=”nl”) </li></ul><ul><li>P3: Maak content “tab-baar” </li></ul><ul><li>P3: Specificeer en defineer meerdere zoekmogelijkheden </li></ul><ul><li>P3: Consistente presentatiestijl </li></ul><ul><li>P3: Tabellen samenvatten </li></ul><ul><li>P3: “Watermark” beter dan lege inputs. * </li></ul>
  8. 8. Alternatieven voor video http://www.accessibility.nl/internet/artikelen/audiovideo#voorbeelden
  9. 9. Em’s i.p.v. pixels
  10. 10. Em’s i.p.v. pixels (2)
  11. 11. Maak gebruik van Headerstructuren goed fout
  12. 12. Alternatieven voor AJAX/Javascript
  13. 13. “ Watermark” beter dan lege inputs
  14. 14. Lever metadata (semantiek) Microformats (Metatags)
  15. 15. ~ Webrichtlijnen van de Overheid
  16. 16. Webrichtlijnen van de overheid <ul><li>Selectie uit 125 </li></ul><ul><li>Geen deprecated technologie (Frames, img maps) </li></ul><ul><li>Javascript alleen via de DOM </li></ul><ul><li>Minimaal HTML 4.01 of XHTML 1.0, altijd strict. </li></ul><ul><li>Correcte hierarchie headers </li></ul><ul><li>Geen stappen overslaan in headers </li></ul><ul><li>Geen br voor het scheiden van p’s </li></ul><ul><li>Gebruik em, abbr, cite, dfn, ins, del, q * </li></ul><ul><li>Gebruik blockquote, ol </li></ul><ul><li>Betekenisvolle namen id’s en classes * </li></ul><ul><li>Leesbare URL’s * </li></ul><ul><li>HTML in volgorde van belangrijkheid * </li></ul><ul><li>Decoratieve img via CSS, content img via HTML </li></ul>Voor de volledige lijst http://www.webrichtlijnen.nl/richtlijnen/ <ul><li>Geen CSS Image replacement * </li></ul><ul><li>Focus of Outline niet verwijderen * </li></ul><ul><li>Geen accesskeys </li></ul><ul><li>Geef aan wat je formulierdata doet * </li></ul><ul><li>Geef aan wat er na clicks gebeurt </li></ul><ul><li>Tabellen (laat ik even buiten beschouwing nu) </li></ul><ul><li>Geen tabellen voor layout </li></ul><ul><li>Groepeer inputelementen middels fieldsets </li></ul><ul><li>Geef verplichte velden duidelijk aan </li></ul><ul><li>Geef mogelijkheid tot archivering formdata </li></ul><ul><li>Zo min mogelijk css voor formulieren </li></ul><ul><li>Geen herstel knop voor formulieren </li></ul><ul><li>Taalkeuze op iedere pagina </li></ul><ul><li>Geen nationaliteiten vermelden in taalkeuze </li></ul>
  17. 17. Webrichtlijnen van de overheid <ul><li>Selectie uit 125 </li></ul><ul><li>Schrijf taalkeuzes volledig uit... </li></ul><ul><li>... in de desbetreffende taal </li></ul><ul><li>Altijd UTF-8 * </li></ul><ul><li>Geef iedere pagina een unieke titel </li></ul><ul><li>Maak foutpagina’s (404, 500) aan </li></ul><ul><li>Gebruik slimme zoektechnologie * </li></ul><ul><li>Geef mogelijkheid tot foutrapportage </li></ul><ul><li>Websites moeten schalen * </li></ul><ul><li>Bouw volgens richtlijnen van W3C (doh!) </li></ul>Voor de volledige lijst http://www.webrichtlijnen.nl/richtlijnen/
  18. 18. Gebruik em, abbr, cite, dfn, ins, del, q
  19. 19. Betekenisvolle namen id’s/classes
  20. 20. Leesbare URL’s http://www.target.com/gp/detail.html/602-9912342-3046240? _encoding=UTF8&frombrowse=1&asin=B000FN0KWA fout http://www.nasa.gov/home/index.html?skipIntro=1 beter h ttp://web.mit.edu/is/usability/usability-guidel ines.htm goed
  21. 21. HTML volgorde van belangrijkheid
  22. 22.
  23. 23.
  24. 24.
  25. 25. Geen CSS image replacement
  26. 26. Focus / outline niet verwijderen
  27. 27. Formulierdata uitleggen
  28. 28. Altijd UTF-8
  29. 29. Schalen van websites Internet Explorer 6
  30. 30. Absolute Don’ts <ul><ul><li>Inline code </li></ul></ul><ul><ul><li>list-styles compleet verwijderen </li></ul></ul><ul><ul><li>“ text-decoration: none;” op a’s </li></ul></ul><ul><ul><li>Onbelicht gelaten: </li></ul></ul><ul><ul><li>CMS-systemen </li></ul></ul>
  31. 31. De opdracht <ul><li>Bouw een website naar keuze om conform webrichtlijnen, of indien te complex Prio 1 + 2. </li></ul><ul><li>Basis HTML: </li></ul><ul><ul><li>http://www.bohemianworks.nl/basis.zip </li></ul></ul><ul><li>Handige links: </li></ul><ul><ul><li>W3C validator: http://validator.w3.org / </li></ul></ul><ul><ul><li>W3C guidelines http://www.accessibility.nl/internet/richtlijnen/checklist </li></ul></ul><ul><ul><li>Webrichtlijnen: http://www.webrichtlijnen.nl / </li></ul></ul>
  32. 32. Voor vragen: <ul><li>Jeroen Hulscher </li></ul><ul><li>[email_address] </li></ul><ul><li>06 15 88 02 65 </li></ul><ul><li>@bohemianworks </li></ul><ul><li>Voor deze presentatie: </li></ul><ul><li>http://www.slideshare.net/JeroenHulscher </li></ul>

×