Presentatie Kor Dwarshuis Holland Open2008

466 views

Published on

in Dutch. About Dutch governmental Web Guidelines, accessibility.

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

  • Be the first to like this

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

No notes for slide

Presentatie Kor Dwarshuis Holland Open2008

  1. 1. Accessibility richtlijnen: waar eis en wanneer wens? Holland Open Conferentie 2008 Kor Dwarshuis
  2. 2. < Inhoudsopgave > <ul><li>Samenvatting </li></ul><ul><li>Inleiding </li></ul><ul><li>Korte geschiedenis </li></ul><ul><li>Recente ontwikkelingen </li></ul><ul><li>Accessibility </li></ul><ul><li>Webrichtlijnen </li></ul><ul><li>Case Study </li></ul><ul><li>Conclusie </li></ul><ul><li>Vragen </li></ul><ul><li>Links </li></ul><ul><li>Bijlage </li></ul><ul><li>-> < Samenvatting > </li></ul>
  3. 3. < Samenvatting > <ul><ul><li>Overheden en bedrijven staan voor de uitdaging hun websites zó te bouwen dat ze zowel voor mensen als voor browsers en zoekmachines optimaal toegankelijk zijn. </li></ul></ul><ul><ul><li>De Webrichtlijnen helpen daarbij. </li></ul></ul><ul><ul><li>( www.webrichtlijnen.nl ) </li></ul></ul><ul><ul><li>-> < Inleiding > </li></ul></ul>
  4. 4. < Inleiding > <ul><ul><li>Even voorstellen: </li></ul></ul><ul><ul><li>Naam: Kor Dwarshuis </li></ul></ul><ul><ul><li>Beroep: zelfstandig front-end web ontwikkelaar </li></ul></ul><ul><ul><li>website: dwarshuis.com </li></ul></ul><ul><ul><li>voorheen: systeembeheerder </li></ul></ul><ul><ul><li>(Novell, UNIX) bij </li></ul></ul><ul><ul><li>Capgemini </li></ul></ul>
  5. 5. < Inleiding > Wie ben ik nog meer
  6. 6. < Inleiding > <ul><ul><li>Wie zijn jullie? </li></ul></ul><ul><ul><li>Wie heeft gehoord van Web Standards ... </li></ul></ul><ul><ul><li>... Table based lay-out ... </li></ul></ul><ul><ul><li>... Accessibility ... </li></ul></ul><ul><ul><li>... de Webrichtlijnen ... </li></ul></ul>
  7. 7. < Inleiding > <ul><ul><li>Relatie met Holland Open </li></ul></ul><ul><ul><li>Webrichtlijnen: </li></ul></ul><ul><ul><li>“ In het raamwerk van eisen worden eisen gedefiniëerd waarin open standaarden wordt gevraagd.” </li></ul></ul><ul><ul><li>“ ...daar waar een open standaard beschikbaar is, deze ook dient te worden gebruikt.” </li></ul></ul><ul><ul><li>http://www.webrichtlijnen.nl/achtergrond/raamwerk/open-standaarden/ </li></ul></ul>
  8. 8. < Inleiding > <ul><ul><li>Doel van deze presentatie: </li></ul></ul><ul><ul><li>Voordelen Accessibility / Webrichtlijnen laten zien </li></ul></ul>
  9. 9. < Inleiding > Waar gaat het over? - Een paar 'soundbites': 1 Accessibility (en) = Toegankelijkheid (nl) 2 'Webrichtlijnen' zijn duidelijke handleidingen om websites toegankelijk te maken 3 'HTML zoals HTML bedoeld is.' 4 'Websites toegankelijk voor alle user-agents (browsers, zoekbots, screenreaders, mobiele platforms)' -> < Korte geschiedenis >
  10. 10. < Korte geschiedenis > Het www is voor iedereen! Gevolg: Bijna 100% van HTML wereldwijd is “tag soup ” ; -> user agents interpreteren deze “tag soup ” ; HTML en JAVASCRIPT worden oneigenlijk gebruikt -> user agents “lopen vast” of nemen maatregelen
  11. 11. < Korte geschiedenis > <ul><ul><li>www.nieuwekerk.nl zonder javascript (begin 2008) </li></ul></ul>
  12. 12. < Korte geschiedenis > <ul><ul><li>www.nieuwekerk.nl zonder javascript (sep 2008) </li></ul></ul><ul><ul><li>“ Voor deze website heeft u de Shockwave Flash Plugin nodig. Deze kunt u hier downloaden” </li></ul></ul><ul><ul><li>(Dat schiet al lekker op.) </li></ul></ul>
  13. 13. < Korte geschiedenis > <ul><ul><li>www.nieuwekerk.nl mét javascript </li></ul></ul>
  14. 14. < Korte geschiedenis > Rommelig | Netjes ↑ ↑ ↑ ↑ Searchbot: “Zootje; ik kom later wel eens terug”
  15. 15. < Korte geschiedenis > <ul><ul><li>Windows Live zonder javascript </li></ul></ul>
  16. 16. < Korte geschiedenis > <ul><ul><li>Windows Live mét javascript </li></ul></ul>
  17. 17. < Korte geschiedenis > <ul><ul><li>Google mail zonder javascript doet het wel </li></ul></ul>
  18. 18. < Korte geschiedenis > <ul><ul><li>“ Je weet niet wat je mist!” </li></ul></ul><ul><ul><li>of eigenlijk: </li></ul></ul><ul><ul><li>“ Je weet niet wie je mist!” </li></ul></ul><ul><li>-> < Recente ontwikkelingen > </li></ul>
  19. 19. < Recente ontwikkelingen > <ul><ul><li>Microsoft committeert zich aan de </li></ul></ul><ul><ul><li>Web Standards met Internet Explorer 8 </li></ul></ul><ul><ul><li>Google eist snellere sites, en </li></ul></ul><ul><ul><li>heeft het over Accessibility </li></ul></ul><ul><ul><li>Wehkamp maakte zijn site accessible </li></ul></ul><ul><ul><li>Legal & General maakte zijn site accessible </li></ul></ul><ul><ul><li>(case study) </li></ul></ul>
  20. 20. < Recente ontwikkelingen > <ul><li>Van Google's Blogspot: </li></ul><ul><li>(n.a.v. Google Chrome) </li></ul><ul><ul><li>“ When your site renders poorly or is difficult to use on many browsers you risk losing your visitors' interest, and, if you're running a monetized site, perhaps their business.” </li></ul></ul><ul><ul><li>“ Here's a quick list to make sure </li></ul></ul><ul><ul><li>you're covering the basics:” </li></ul></ul>
  21. 21. < Recente ontwikkelingen > <ul><li>Van Google's Blogspot: </li></ul><ul><ul><li>Step 1: Ensure browser compatibility by focusing on accessibility </li></ul></ul><ul><ul><li>The same techniques that make your site more accessible to search engines, [...], often help your site's compatibility on various browsers [...]. </li></ul></ul><ul><ul><li>Simpler HTML is often more easily cross-compatible than the latest techniques. </li></ul></ul><ul><ul><li>Step 2: Consider validating your code </li></ul></ul><ul><ul><li>Written by Maile Ohye, Developer Programs Tech Lead (@ Google) </li></ul></ul><ul><ul><li>http://feeds.feedburner.com/~r/blogspot/amDG/~3/384459169/workin-it-on-all-browsers.html </li></ul></ul><ul><li>-> < Accessibility > </li></ul>
  22. 22. < Accessibility >
  23. 23. < Accessibility > <ul><ul><li>Wat was dat ook al weer? </li></ul></ul><ul><ul><li>“ Iets met blinden” </li></ul></ul><ul><ul><li>“ dus het interesseert me niet” </li></ul></ul>
  24. 24. < Accessibility > Wat is accessibility? 1 Accessibility (en) = Toegankelijkheid (nl) 2 'HTML zoals HTML bedoeld is.' 3 'Websites toegankelijk voor alle user-agents (browsers, zoekbots, screenreaders, mobiele platforms)'
  25. 25. < Accessibility > <ul><ul><li>Verband tussen Accessibility en Webrichtlijnen : </li></ul></ul><ul><ul><li>De Webrichtlijnen zijn een set duidelijke richtlijnen om een site accessible te maken </li></ul></ul><ul><ul><li>(onder andere) </li></ul></ul>
  26. 26. < Accessibility > <ul><ul><li>Zou je willen dat zo veel mogelijk mensen je site kunnen bezoeken? </li></ul></ul><ul><ul><li>Klant: Ja tuurlijk! </li></ul></ul><ul><ul><li>Vind je het belangrijk dat je site snel is? </li></ul></ul><ul><ul><li>Klant: Ja! </li></ul></ul><ul><ul><li>Site ook toegankelijk binnen kantooromgevingen, internet café's, op mobiele toepassingen? </li></ul></ul><ul><ul><li>Klant: Ja zeker! </li></ul></ul><ul><ul><li>Vind je het belangrijk dat je site makkelijk technisch te beheren is? </li></ul></ul><ul><ul><li>Klant: Ja, scheelt weer! </li></ul></ul><ul><ul><li>Vind je het belangrijk dat je site het goed doet in zoekmachines? </li></ul></ul><ul><ul><li>Klant: Ja, zekerste weten! </li></ul></ul><ul><ul><li>Vind je het belangrijk dat je site toegankelijk is? </li></ul></ul><ul><ul><li>Klant: Dat is toch accessibility, Web Standards? Nee dat interesseert me eigenlijk niet zo </li></ul></ul>
  27. 27. < Accessibility > <ul><li>Waarover gaat het: </li></ul><ul><li>Visueel beperkten: - 2% visueel gehandicapten (0.1% is blind) - 1 op 12 mannen en 1 op 200 vrouwen is kleurenblind - 100% van de zoekmachines is blind </li></ul><ul><li>Auditief beperkten: - ongeveer 1,5 miljoen doven en slechthorenden </li></ul><ul><li>Lichamelijk beperkten: - 11% van 12 jaar en ouder </li></ul><ul><li>Verstandelijk beperkten of mensen met dyslexie: - 2% tot 10% </li></ul>
  28. 28. < Accessibility > <ul><li>Waarover gaat het: </li></ul><ul><li>Senioren (65+) - 14% van de bevolking in 2005 (schatting van 23,3% in 2040)‏ </li></ul><ul><li>Anderszins beperkten: - 1 op 5 mensen met RSI-klachten </li></ul><ul><li>Niet beperkten in een beperkende situatie - Kantooromgevingen, internet café's, mobiele platforms bron: Stichting Accessibility </li></ul><ul><li>-> < Webrichtlijnen > </li></ul>
  29. 29. < Webrichtlijnen > <ul><ul><li>“ In april 2006 heeft de Tweede Kamer haar zorg uitgesproken over de mate van toegankelijkheid van websites van de Nederlandse overheid. </li></ul></ul><ul><ul><li>Dit leidde tot het Besluit Kwaliteit Rijksoverheidswebsites op 30 juni 2006. </li></ul></ul><ul><ul><li>Als gevolg van het besluit moeten nieuwe websites van de rijksoverheid aan de webrichtlijnen voldoen.” </li></ul></ul>
  30. 30. < Webrichtlijnen > <ul><ul><li>Voordelen: </li></ul></ul><ul><ul><li>Beter en duurzaam toegankelijk voor mensen en zoekmachines </li></ul></ul><ul><ul><li>Snellere website </li></ul></ul><ul><ul><li>Voorbereid op de toekomst (o.a. mobiele toepassingen) </li></ul></ul><ul><ul><li>Hogere Return on Investment </li></ul></ul><ul><ul><li>Beter opdrachtgeverschap </li></ul></ul><ul><ul><li>Managen bestuurlijk risico </li></ul></ul><ul><ul><li>( http://www.webrichtlijnen.nl/waarom/ )‏ </li></ul></ul>
  31. 31. < Webrichtlijnen > <ul><ul><li>Het kwaliteitsmodel Webrichtlijnen </li></ul></ul><ul><ul><li>Instrument voor beter opdrachtgeverschap </li></ul></ul><ul><ul><li>Referentie bij front-end web development </li></ul></ul><ul><ul><li>Basisprincipes van de Webrichtlijnen </li></ul></ul><ul><ul><li>Juiste toepassing van standaarden </li></ul></ul><ul><ul><li>Gelaagd bouwen(progressive enhancement) </li></ul></ul><ul><ul><li>Semantiek ('HTML zoals HTML bedoeld is') </li></ul></ul><ul><ul><li>Duurzaamheid </li></ul></ul><ul><ul><li>Toegankelijkheid </li></ul></ul><ul><ul><li>Complexiteitsreductie (Strikte scheiding tussen inhoud, vorm en functie) </li></ul></ul><ul><li>-> < Case study: Legal & General > </li></ul>
  32. 32. < Case study: Legal & General > Heeft website toegankelijker gemaakt
  33. 33. < Case study: Legal & General > <ul><li>Resultaten </li></ul><ul><ul><li>+ 30% bezoekers via zoekmachines </li></ul></ul><ul><ul><li>hoger in Google voor alle sleutelwoorden </li></ul></ul><ul><ul><li>pagina's laden 75% sneller </li></ul></ul><ul><ul><li>werkt beter in andere browsers </li></ul></ul><ul><ul><li>13.000 extra bezoekers per maand </li></ul></ul><ul><ul><li>minder klachten over de website </li></ul></ul><ul><ul><li>ook op PDA's, mobile telefoons en blackberry </li></ul></ul><ul><ul><li>beheer van content vergt minder tijd </li></ul></ul>
  34. 34. <ul><ul><li>Resultaten </li></ul></ul><ul><ul><li>Positieve Return on Investment: </li></ul></ul><ul><ul><li>£200.000 besparing per jaar op onderh. + beheer </li></ul></ul><ul><ul><li>aantal ”Life quote's”: +95% </li></ul></ul><ul><ul><li>aantal levensverzekeringen via website: + 90% </li></ul></ul><ul><ul><li>Kortgezegd: 100% Return on Investment in < 12 maanden </li></ul></ul><ul><ul><li>bron: http://www.accessibility.nl/toetsing/casestudy/Legalandgeneral , gebaseerd op presentatie tijdens lancering Pas 78 (Publicly available specification 78 launch) in Londen, op 8 maart 2006 </li></ul></ul><ul><li>-> < Conclusie > </li></ul>< Case study: Legal & General >
  35. 35. < Conclusie > Gewoon doen de webrichtlijnen zijn gratis, helpen bij beter opdrachtgeverschap, je trekt meer bezoekers, die beter vinden wat ze zoeken. Iedereen blij. -> < Links >
  36. 36. < Links > <ul><ul><li>http://www.webrichtlijnen.nl/ </li></ul></ul><ul><ul><li>http://www.webrichtlijnen.nl/toetsen/ </li></ul></ul><ul><ul><li>http://feeds.feedburner.com/~r/blogspot/amDG/~3/384459169/workin-it-on-all-browsers.html </li></ul></ul><ul><ul><li>http://fronteers.nl/blog/categorieen/webrichtlijnen </li></ul></ul><ul><ul><li>http://www.accessibility.nl/voorbeeld/seo.htm </li></ul></ul><ul><ul><li>http://www.accessibility.nl/toetsing/casestudy </li></ul></ul><ul><ul><li>http://www.naarvoren.nl/artikel/blind_surfen.html </li></ul></ul><ul><ul><li>http://www.webstandards.org/2007/01/15/the-dutch-embrace-web-standards/ </li></ul></ul><ul><ul><li>http://www.456bereastreet.com/archive/200702/ </li></ul></ul><ul><ul><li>http://www.advies.overheid.nl/webrichtlijnen-stappenplan-pilot/ </li></ul></ul><ul><ul><li>http://www.dwarshuis.com </li></ul></ul><ul><li>-> < Vragen > </li></ul>
  37. 37. < Vragen > Stel maar -> < Bijlage >
  38. 38. < Bijlage > Er zijn 125 webrichtlijnen Hier volgen een paar interessante:
  39. 39. R-pd.1.1 <ul><ul><li>Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de structuur van de site en CSS voor de vormgeving ervan. </li></ul></ul>
  40. 40. R-pd.1.2 <ul><ul><li>Bouw websites volgens het principe van gelaagd bouwen. </li></ul></ul>
  41. 41. R-pd.2.4 <ul><ul><li>Bij de bouw van een nieuwe website: gebruik </li></ul></ul><ul><ul><li>van HTML 4.01 of XHTML 1.0 de Strict variant. </li></ul></ul>
  42. 42. R-pd.6.2 <ul><ul><li>Zet de inhoud van de pagina in de HTML </li></ul></ul><ul><ul><li>broncode op volgorde van belangrijkheid. </li></ul></ul>
  43. 43. R-pd.11.1 <ul><ul><li>Gebruik tabellen voor het weergeven van </li></ul></ul><ul><ul><li>relationele informatie en niet voor layout. </li></ul></ul>
  44. 44. R-pd.3.3 <ul><ul><li>Sla in de markup geen niveaus in </li></ul></ul><ul><ul><li>de hiërarchie van kopregels over. </li></ul></ul>
  45. 45. R-pd.4.1 <ul><ul><li>Produceer unieke, onveranderende URL's </li></ul></ul>
  46. 46. R-pd.22.1 <ul><ul><li>Gebruik taal die de bezoeker begrijpt: beperk het gebruik van jargon, moeilijke termen en afkortingen. </li></ul></ul>

×