Webredactie Webrichtlijnen Deel1

1,155
-1

Published on

This presentation is the first part of a presentation that we held for a one-day training for local councils in the Netherlands

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

  • Be the first to like this

No Downloads
Views
Total Views
1,155
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webredactie Webrichtlijnen Deel1

  1. 1. Webredactie en de Webrichtlijnen Ab Bertholet ab&co, partners in communicatie Jaap van de Putte 2 use it, Internet Research & Consultancy
  2. 2. Kennismaking <ul><li>Naam
  3. 3. Functie
  4. 4. Organisatie
  5. 5. Wat wil je vandaag leren? </li></ul>
  6. 6. Inhoud van de dag <ul><li>Kennismakingsrondje en vragen inventariseren
  7. 7. Alle Webrichtlijnen, relevant voor webredacties
  8. 8. Algemene richtlijnen voor goed schrijven
  9. 9. Aan de slag met een CMS
  10. 10. Plenair bespreken eigen vraagstukken </li></ul>
  11. 11. Wat doen we vandaag niet? <ul><li>Webrichtlijnen die betrekking hebben op: </li><ul><li>techniek
  12. 12. formulieren
  13. 13. tabellen
  14. 14. inrichting CMS </li></ul><li>Geschikt maken van video en audio </li></ul>
  15. 15. Syllabus <ul><li>Webredactierichtlijnen
  16. 16. Richtlijnen voor goed schrijven </li></ul>
  17. 17. Ochtendprogramma 9:30 Korte kennismaking 9:40 Introductie in webtoegankelijkheid 9:50 Webredactierichtlijnen, deel 1 10:45 Zelf aan de slag: tekst beoordelen 11:10 Pauze 11:25 Webredactierichtlijnen, deel 2 12:30 Lunch
  18. 18. Middagprogramma 13:15 Goed schrijven 14:15 Teksten beoordelen (plenair) 14:55 Pauze 15:10 Ervaringen en leervragen uitwisselen 16:15 Samenvatting, evaluatie en ruimte voor vragen 16:30 Afsluiting
  19. 19. De Webrichtlijnen <ul><li>“Kwaliteitsmodel” voor websites
  20. 20. 125 richtlijnen
  21. 21. Staan voor: toegankelijkheid, duurzaamheid, vindbaarheid, efficiency </li></ul>
  22. 22. Webrichtlijnen en gemeenten <ul><li>December 2008: Nationaal Uitvoeringsprogramma Betere Dienstverlening en e-overheid (NUP)
  23. 23. Afspraak tussen rijk, provincies, gemeenten en waterschappen
  24. 24. E-toegang:voldoen aan Webrichtlijnen
  25. 25. Deadline: 1 januari 2011 </li></ul>
  26. 26. Toegankelijk voor wie? <ul><li>blinden en slechtzienden
  27. 27. doven en slechthorenden
  28. 28. laaggeletterden
  29. 29. ouderen
  30. 30. motorisch beperkten
  31. 31. instrumenteel beperkten </li></ul>
  32. 32. Toegankelijkheid <ul><li>En voor wie nog meer? </li><ul><li>buurman, collega, familielid, jijzelf? </li></ul><li>Oftewel: voor iedereen: e-inclusion </li></ul>
  33. 33. A brief history of Accessibility 1989 Tim Berners Lee “ontdekt” het internet: “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” 1994 Start W3C Internatonaal consortium voor webstandaarden 1999 W3C Web Accessibility Initiative (WAI) Web Content Accessibility Guidelines (WCAG) 1.0
  34. 34. A brief history of Accessibility 2001 Start Stichting DrempelsWeg (--> DrempelVrij) vertaling en bewerking van WCAG 1.0, prioriteit 1 2001 Advies Europese Commissie WCAG 1.0, prioriteit 1 2006 Webrichtlijnen Verplicht voor rijksoverheden Eigen route Nederland
  35. 35. A brief history dec 2008 Nationaal Uitvoeringsprogramma Betere Dienstverlening en e-overheid (NUP) Provincies, gemeenten, waterschappen Einddatum: 1 januari 2011 dec 2008 W3C publiceert WCAG 2.0 18 juni 2009 Waar doen we het allemaal voor? Toegang voor iedereen “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
  36. 36. Wat zijn de Webrichtlijnen niet? (Maar wat ze wel zeggen te zijn ...) <ul><li>Panacee voor alle webkwalen
  37. 37. Waarborg voor toegankelijkheid
  38. 38. Waarborg voor kwaliteit
  39. 39. Instrument voor kostenbesparing </li></ul>
  40. 40. Wat zijn de Webrichtlijnen wel? <ul><li>Betere toegankelijkheid
  41. 41. Meer kans op een betere usability
  42. 42. Meer kans op een betere vindbaarheid
  43. 43. Helder bouwkader naar webbouwers </li></ul>
  44. 44. 95 Webrichtlijnen (effectief) 35 % gaat over webredactie
  45. 45. Vertaalslag: 36 Webrichtlijnen over webredactie 26 Webredactierichtlijnen
  46. 46. Uitgangspunten Webredactierichtlijnen <ul><li>Goed CMS
  47. 47. Redactie hoeft geen HTML in te voeren.
  48. 48. Elke webredactie moet het kunnen. </li></ul>
  49. 49. Richtlijnen voor websites
  50. 50. Voordelen toepassen Webredactierichtlijnen <ul><li>goed voor de usability (gebruiksvriendelijkheid en bruikbaarheid)
  51. 51. goed voor de accessibility (toegankelijkheid voor mensen met een beperking)
  52. 52. goed voor de findability ( vindbaarheid in zoekmachines) </li></ul>
  53. 53. De Webredactierichtlijnen
  54. 54. Headings Webredactierichtlijn 1: De paginatitel heeft een h1-stijl. Per pagina is er één h1. Webredactierichtlijn 2: Gebruik kopopmaakprofielen voor de koppen. Webredactierichtlijn 3: Sla geen niveaus in de kopstijlen over.
  55. 55. Voordelen gebruik headings <ul><li>beter voor accessibility: </li><ul><li>direct naar de koppen </li></ul><li>betere voor findability: </li><ul><li>tekst met heading krijgt zwaarder gewicht </li></ul><li>beter voor usability: </li><ul><li>uniforme uitstraling website </li></ul></ul>
  56. 56. Opbouw met koppen
  57. 57. Opbouw met kopopmaakprofielen
  58. 58. Opmaakprofielen in het CMS
  59. 59. Opmaakprofielen in het CMS
  60. 60. En gaat het goed bij de gemeente Utrecht? Nee, helaas
  61. 61. Alinea's Webredactierichtlijn 4: Gebruik [Enter] voor een nieuwe alinea.
  62. 62. Voordeel gebruik van Enter of Return <ul><li>Usability: </li><ul><li>Alinea is zelfstandige informatie-eenheid
  63. 63. Maakt scannen van alinea's mogelijk </li></ul><li>Accessibility: </li><ul><li>Maakt springen naar alinea's mogelijk </li></ul><li>Findability: </li><ul><li>?? </li></ul></ul>
  64. 64. Lettergrootte Webredactierichtlijn 5: Gebruik geen superscript of subscript.
  65. 65. Nadeel super/subscript <ul><li>Moeilijk leesbaar: </li><ul><li>70 – 80 % van de originele grootte </li></ul><li>Lijkt ook uit de Nederlandse taal te verdwijnen </li></ul>
  66. 66. Lijsten Webredactierichtlijn 6: Gebruik bij opsommingen de opsommingsopties van de CMS-editor.
  67. 67. Voordelen gebruik correcte opsommingen <ul><li>Usability: </li><ul><li>opsommingen zijn ankerpunten bij het lezen </li></ul><li>Accessibility: </li><ul><li>scannen met spraakuitvoer of braille-uitvoer </li></ul><li>Findability: </li><ul><li>krijgen meer gewicht in zoekmachines </li></ul></ul>
  68. 68. Opsommingen via het CMS
  69. 69. Zo niet ...
  70. 70. Zo niet ...
  71. 71. Zo wel ...
  72. 72. Bestanden Webredactierichtlijn 7: Stel downloads in een open formaat beschikbaar, bijvoorbeeld PDF.
  73. 73. Toelichting bestandsformaat <ul><li>Veel discussie over: </li><ul><li>Wat is de toegevoegde waarde? </li></ul><li>Open format ≠ toegankelijkheid
  74. 74. Ergo: </li><ul><li>Kies bij tekstdocumenten voor PDF
  75. 75. Indien mogelijk voor PDF/A-1a </li></ul></ul>
  76. 76. Links naar HTML-pagina's Webredactierichtlijn 8: Gebruik relevante inhoudswoorden in de linktekst.
  77. 77. Relevante woorden in link <ul><li>Usability: </li><ul><li>herkenning bij scannen </li></ul><li>Accessibility: </li><ul><li>ankerpunten bij spraak-/brailleuitvoer </li></ul><li>Findability: </li><ul><li>linkteksten krijgen zwaarder gewicht </li></ul></ul>
  78. 79. Relevante woorden in link
  79. 80. Uitzondering relevante woorden in link <ul><li>“lees-verder”-links bij aankeilers
  80. 81. Oplossing: </li><ul><li>titel is altijd aanklikbaar
  81. 82. title-tag bij “lees-verder”-link </li></ul></ul>
  82. 83. Aankeilers
  83. 85. Links naar HTML-pagina's Webredactierichtlijn 9: Maak de linktekst zo kort mogelijk.
  84. 86. Linktekst kort <ul><li>Usability: </li><ul><li>sneller herkenning bij het scannen (minder ruis) </li></ul><li>Accessibility: </li><ul><li>sneller bij spraak-/brailleuitvoer </li></ul><li>Findability: </li><ul><li>keyword density (minder ruis) </li></ul></ul>
  85. 87. Linktekst kort <ul><li>Protestantse Theologische Universiteit: </li></ul>
  86. 88. Links naar HTML-pagina's Webredactierichtlijn 10: Onderstreep geen teksten die geen hyperlink zijn.
  87. 89. Links naar HTML-pagina's Webredactierichtlijn 11: Open niet automatisch een nieuwe tab of nieuw venster, behalve als de informatie nodig is in een proces dat niet onderbroken mag worden (zoals een bestelproces).
  88. 90. Waarom geen nieuwe vensters/tabs openen? <ul><li>“Anders zijn we onze bezoekers kwijt.”
  89. 91. Nieuwe vensters / tabs worden niet opgemerkt (zeker met de nieuwe browsers)
  90. 92. Back button gaat kapot
  91. 93. Keuze bij de bezoeker laten </li></ul>
  92. 94. Links naar HTML-pagina's Webredactierichtlijn 12: Gebruik bij lange pagina's interne links. Neem deze links op in een pagina-index.
  93. 95. Pagina-index: zo niet ...
  94. 96. Pagina-index: zo wel ...
  95. 97. Zelf aan de slag: teksten beoordelen
  96. 98. Voorbeeld 1 hele pagina begin pagina
  97. 99. Voorbeeld 2
  98. 100. Voorbeeld 3
  99. 101. Voorbeeld 4
  100. 102. Voorbeeld 5
  101. 103. Voorbeeld 6
  102. 104. Voorbeeld 7
  103. 105. Voorbeeld 8
  104. 106. Voorbeeld – extra
  105. 107. Links naar niet-HTML-pagina's Webredactierichtlijn 13: Open downloadbare bestanden in hetzelfde venster of tab.
  106. 108. Links naar niet-HTML-pagina's Webredactierichtlijn 14: Meld bij downloadbare bestanden de naam van het bestand en het bestandsformaat. Geef het bestand een duidelijke naam. Verwijst de link naar een e-mailadres, schrijf het e-mailadres uit in de linktekst.
  107. 109. Zo niet ...
  108. 110. Zo wel ...
  109. 111. Afbeeldingen Webredactierichtlijn 15: Geef elke afbeelding die betekenis overbrengt een overeenkomstige alternatieve beschrijving van maximaal 70 tekens.
  110. 112. Voordelen gebruik alt-tekst <ul><li>Beter voor accessibility: </li><ul><li>ook informatie bij spraak- en brailleuitvoer </li></ul><li>Beter voor usability: </li><ul><li>alternatief als plaatje niet getoond kan worden </li></ul><li>Beter voor findability? </li></ul>
  111. 113. Alternatieve teksten <ul><li>Is afbeelding wel of niet informatief?
  112. 114. Tekst die in de plaats komt van de afbeelding
  113. 115. Stel je voor dat je de website opleest. Wat zou je over de afbeelding zeggen?
  114. 116. Alt-teksten controleren: </li><ul><li>Firefox: Pagina » Pagina-info </li></ul></ul>
  115. 119. Voorbeelden alternatieve teksten Vrouw met dochter op fiets bij Lelystadse kust Vrouw in rolstoel doet boodschappen in supermarkt
  116. 120. Voorbeelden alternatieve teksten Werk aan de weg Ontwikkeling Lelystad Airport
  117. 121. Voorbeelden alternatieve teksten jongen kijkt met vergrootglas
  118. 122. Afbeeldingen Webredactierichtlijn 16: In uitzonderlijke situaties is er een langere tekst nodig dan 70 tekens. Gebruik dan het longdesc-attribuut.
  119. 123. Aanklikbare afbeeldingen Webredactierichtlijn 17: Gebruik de title-tag bij een link op een afbeelding (dus zonder linktekst). Geef in deze titel zinvolle informatie over de bestemming van de link.
  120. 124. Link en titel
  121. 125. Goed schrijven Webredactierichtlijn 18 t/m 21: doen we vanmiddag
  122. 126. Tabellen Webredactierichtlijn 22: Gebruik bij voorkeur geen tabellen.
  123. 127. Tabel nodig?
  124. 128. Tabel nodig?
  125. 129. Tabellen Webredactierichtlijn 23: Is het gebruik van een tabel noodzakelijk, gebruik dan de opmaakregels die de Webrichtlijnen voorschrijven.
  126. 130. Lange citaten Webredactierichtlijn 24: Gebruik het element blockquote voor het aangeven van (lange) citaten.
  127. 131. Blockquote in CMS
  128. 132. Taalwisselingen Webredactierichtlijn 25: Geef aan als de tekst wijzigt naar een andere taal dan de basistaal.
  129. 133. Belang van taalwisselingen <ul><li>Usability: </li><ul><li>geen belang </li></ul><li>Findability: </li><ul><li>geen belang </li></ul><li>Accessibility: </li><ul><li>belangrijk voor spraakuitvoer </li></ul></ul>
  130. 134. Taalwisselingen in CMS
  131. 135. Taalwisselingen in CMS
  132. 136. Video en audio Webredactierichtlijn 26: Zorg bij multimedia – video en audio – dat er een tekstueel alternatief is voor beeld en geluid.
  133. 137. Nog vragen?
  134. 138. Na de cursus <ul><li>Op de ELO: </li><ul><li>syllabus
  135. 139. sheets
  136. 140. Verder praten? In het forum </li></ul><li>Terugkomdag: </li><ul><li>najaar
  137. 141. thema's </li></ul></ul>
  138. 142. Afsluiting ochtend

×