An improvised presentation (in Dutch) based on previous available materiaal. The slides are not all that pretty, but were more of an experiment in using LaTeX beamer class.

1. De Webrichtlijnen voor iedereen
Stephen Hay, Cinnamon Interactive
Fronteers Docentendag
7 mei 2009

2. Acroniemen-nachtmerrie
XHTML

3. Acroniemen-nachtmerrie
XHTML
CSS

4. Acroniemen-nachtmerrie
XHTML
CSS
W3C

5. Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI

6. Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG

7. Webrichtlijnen zijn voor...
webontwikkelaars

8. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten

9. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten

10. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden

11. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren

12. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines

13. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel

14. Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel
?

15. Webrichtlijnen zijn voor...
toegankelijkheid

16. Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid

17. Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid

18. Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid
kwaliteit

19. Webrichtlijnen voorkomen ergernissen
Onleesbare kleurcombinaties
Flash-/Javascript-afhankelijkheid
Ontbrekende inhoud
etc.

20. De voordelen
juridisch
financieel
technisch
sociaal

21. Juridisch

22. Juridisch

23. Juridisch
Rechtzaak = $6.000.000 + aanpassen website

24. Financieel
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving

25. Financieel
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Meer:
Gebruik

26. Financieel

27. Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid

28. Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability (overdraagbaar)

29. Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability (overdraagbaar)
Geen:
Alternatieve versies (tekst/print)

30. Sociaal
Online shopper, kleurenblind

31. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.

32. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof

33. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.

34. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind

35. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.

36. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen

37. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.

38. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruiker

39. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruiker
scheiding van style en content, etc.

40. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruiker
scheiding van style en content, etc.
Gebruiker zonder duidelijke beperking

41. Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruiker
scheiding van style en content, etc.
Gebruiker zonder duidelijke beperking
geen javascript afhankelijkheid, etc.

42. Webrichtlijnen:
Een verzameling van standaarden en best practices

43. W3C Standaarden

44. W3C WAI richtlijnen

45. ISO HTML

46. Best practices

47. Gelaagd Bouwen
(Progressive Enhancement)

48. Structuur

49. Vormgeving
Structuur

50. Gedrag
Vormgeving
Structuur

51. Structuur

52. Vormgeving

53. Gedrag

54. Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d

55. Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/

56. Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf

57. Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf
troonrede.pdf

58. Paginastructuur: Pagina als outline

59. Alternatieve teksten
alt-tekst
alt="druk op een icoon om een programma te openen"

60. De werking van een link niet beschrijven
Niet: Klik hier voor een transcriptie van de troonrede

61. De werking van een link niet beschrijven
Niet: Klik hier voor een transcriptie van de troonrede
Wel: Er is ook een transcriptie van de troonrede beschikbaar

62. Nieuwe vensters...
Niet zonder waarschuwing

63. Nieuwe vensters...
Niet zonder waarschuwing
Liefst de keuze overlaten aan de gebruiker

64. Open standaarden
Ook naast gesloten standaarden,
bied altijd een open alternatief

65. CSS: Cascading Style Sheets

66. Zonder CSS

67. Met CSS

68. Andere CSS = andere vormgeving

69. Niet uitsluitend met kleur communiceren

70. Niet uitsluitend met kleur communiceren

71. Gebruik contrast

72. Tabellen voor data

73. Niet voor layout

74. Relatie tussen headers en inhoud aangeven
Goed Slecht
Eten De Librije FEBO
Drinken De Draai Strandtent Jaap

75. Geen frames.

76. Formulieren: Labels

77. Formulieren: Verplichte velden aangeven

78. Meer richtlijnen voor formulieren
Geen “formulier navigatie”
Gebruik van contingency design (huh?)
Geen client-side afhankelijkheid

79. Talen: de taal van de pagina aangeven
Taal aangeven in HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl">

80. Talen: taalverschillen aangeven
Taalwisselingen aangeven in HTML
<span lang="en">Language</span> verschillen aangeven

81. Talen: geen vlaggen

82. Talen: geen vlaggen
Nationaliteit/land is geen taal

83. Karaktercodering
Specificeren
UTF-8
Karaktercodering aangeven in HTML
<meta http-equiv="content-type"
content="text/html;charset=UTF-8" />

84. Ultimate Search Engine Secret
Een beschrijvende titel

85. Ultimate Search Engine Secret
Een beschrijvende titel
(De Webrichtlijnen doen de rest)

86. Contingency design:
Design voor als het fout gaat

87. Contingency design 1

88. Contingency design 1

89. Contingency design 2

90. Contingency design 2

91. Vragen?