~ Toegankelijk bouwen voor het web.
Agenda <ul><li>Wat is toegankelijk bouwen?  </li></ul><ul><li>W3C guidelines </li></ul><ul><li>Webrichtlijnen van de Neder...
~ Wat is toegankelijk bouwen?
<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...
Pro’s en Con’s <ul><li>Brede doelgroep dienen </li></ul><ul><li>Automatische zoekmachine optimalisatie </li></ul><ul><li>S...
~ W3C richtlijnen
W3C Richtlijnen <ul><li>Bouw </li></ul><ul><li>P1: Opmaak scheiden van Content </li></ul><ul><li>P1: Leesbare HTML (ook zo...
Alternatieven voor video http://www.accessibility.nl/internet/artikelen/audiovideo#voorbeelden
Em’s i.p.v. pixels
Em’s i.p.v. pixels (2)
Maak gebruik van Headerstructuren goed fout
Alternatieven voor AJAX/Javascript
“ Watermark” beter dan lege inputs
Lever metadata (semantiek) Microformats (Metatags)
~ Webrichtlijnen van de Overheid
Webrichtlijnen van de overheid <ul><li>Selectie uit 125 </li></ul><ul><li>Geen deprecated technologie (Frames, img maps) <...
Webrichtlijnen van de overheid <ul><li>Selectie uit 125 </li></ul><ul><li>Schrijf taalkeuzes volledig uit... </li></ul><ul...
Gebruik em, abbr, cite, dfn, ins, del, q
Betekenisvolle namen id’s/classes
Leesbare URL’s http://www.target.com/gp/detail.html/602-9912342-3046240? _encoding=UTF8&frombrowse=1&asin=B000FN0KWA fout ...
HTML volgorde van belangrijkheid
Geen CSS image replacement
Focus / outline niet verwijderen
Formulierdata uitleggen
Altijd UTF-8
Schalen van websites Internet Explorer 6
Absolute Don’ts <ul><ul><li>Inline code </li></ul></ul><ul><ul><li>list-styles compleet verwijderen </li></ul></ul><ul><ul...
De opdracht <ul><li>Bouw een website naar keuze om conform webrichtlijnen, of indien te complex Prio 1 + 2. </li></ul><ul>...
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>...
Upcoming SlideShare
Loading in …5
×

Toegankelijkheid

813
-1

Published on

Workshop about W3C guidelines and Webguidelines by the Dutch government

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

  • Be the first to like this

No Downloads
Views
Total Views
813
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×