WCAG 2.0 en Webrichtlijnen versie 2. Presentatie van Iacobien Riezebosch op het Nationaal Congres Digitale Toegankelijkheid (20 juni 2013) in Utrecht. Hierin wordt in korte tijd uitgelicht wat digitale toegankelijkheid is en hoe de recente versie van de toegankelijkheidsrichtlijnen van het W3C (WCAG 2.0) zijn opgebouwd. Vervolgens wordt uiteengezet waaruit de uitbreiding bestaat die is opgenomen in de Nederlandse webrichtlijnen (Webrichtlijnen versie 2). De principes worden met voorbeelden geillustreerd. Inhoud presentatie: • Digitale toegankelijkheid en bouwkwaliteit • WCAG 1.0 en het web van 1999 • Digitale toegankelijkheid en Webrichtlijnen in internationaal perspectief • Opbouw richtlijnen en terminologie: o De lagen van WCAG 2.0 o De principes o De niveaus A, AA en AAA o Uitgelichte veranderingen • Een organisatorisch probleem, geen technisch probleem • Organisatie en succesfactoren • Fabels en feiten © schema’s en iconen WCAG 2.0, Webrichtlijnen versie 2, Waarneembaar, Bedienbaar, Begrijpelijk, Robuust en Universeel: Iacobien Riezebosch, 2013

1. WCAG 2.0 en Webrichtlijnen versie 2
door Iacobien Riezebosch
20 juni 2013, Nationaal Congres Digitale Toegankelijkheid

2. Digitale toegankelijkheid

3. WCAG
• WCAG: Web Content Accessibility Guidelines
• Internationale richtlijnen voor digitale
toegankelijkheid.
• Vastgesteld door het W3C: belangengroeperingen,
overheden, bedrijven en experts
• Opgenomen in nationale wetten
en regels wereldwijd

4. WCAG
Alle content en functionaliteit toegankelijk
voor mensen met een functiebeperking:
§ doof en slechthorend
§ blind en slechtziend
§ motorische beperking
§ cognitieve beperking

5. Digitale toegankelijkheid en Europa
• Wetgeving EU in voorbereiding:
Directive (Europese richtlijn)
• Naar Europese norm over elektronische
toegankelijkheid. Opgenomen worden:
§ WCAG 2.0, niveau AA
§ meetmethode (in ontwikkeling)

6. Webrichtlijnen

7. Webrichtlijnen
• WCAG 2.0 is volledig opgenomen.
• Toegankelijkheid: informatie bruikbaar voor
iedereen, ongeacht:
§ functiebeperking (WCAG 2.0)
§ software
§ hardware
§ device
§ omstandigheden

8. Webrichtlijnen
Informatie is:
§ toegankelijk
§ uitwisselbaar
§ duurzaam
§ vindbaar en doorzoekbaar

9. Webrichtlijnen
§ Pas-toe-of-leg-uit
§ Toepassingskader
§ Onafhankelijke toetsing:
Waarmerk drempelvrij.nl
(Webrichtlijnen / WCAG)

10. Digitale toegankelijkheid
Responsive
Usability
Mobile
Zoekmachineoptimalisatie
Semantiek

11. Richtlijnen, versie 1
• WCAG 1.0
§ 1999: “Internet”
§ HTML, JavaScript, (CSS)
• Webrichtlijnen 1
§ Eerste versie in 2004

12. Amazon.com 1999

13. WhiteHouse.gov1999

14. Postbus 51, 1999

15. Rijksoverheid 2001

16. Nu: meer mogelijkheden
• Nieuwe technologieën
• Veelheid aan devices
• Veelheid aan gebruikers
• Gebruikers nog steeds beperkte vaardigheden
• Mobiel, mobile only gebruikers
• Snel internet, langzaam internet
• Video, social media, kaarten,
interactie

17. Party like it’s 1999?

18. Nu
• WCAG 1.0: richtlijnen voor het web van toen
• WCAG 2.0: richtlijnen voor het web van nu EN STRAKS:
• WCAG 2.0 en Webrichtlijnen 2 voor nieuwe sites en site-
onderdelen
• WCAG 2.0:
ISO-norm, wordt EU-norm
Opgenomen in wetgeving en regelgeving wereldwijd
• Webrichtlijnen 2:
Pas-toe-of-leg-uit, toepassingskader.
WCAG 2.0 integraal opgenomen.

19. De nieuwe richtlijnen. Hoe het zit …

20. De lagen van WCAG 2.0
WWCCAAGG 22..00
PPrriinncciippee PPrriinncciippee Principe Principe
SSCC SC SC
RRiicchhttlliijjnn Richtlijn RRiicchhttlliijjnn
AAffddooeennddee
tteecchhnniieekkeenn
Aanbevolen
technieken
Gangbare
fouten(!)
SSuucccceessccrriitteerriiuumm SC
Algemene
techniek x
Algemene
techniek y
HTML-
techniek x
PDF-
techniek x
JavaScript-
techniek x
Flash-
techniek x
??
NORMATIEF
INFORMATIEF

21. WCAG 2.0

22. Webrichtlijnen 2

23. De principes in het kort
Waarneembaar Bedienbaar
Begrijpelijk Robuust
Universeel

24. Waarneembaar

25. Bedienbaar

26. Begrijpelijk

27. Robuust

28. Universeel

29. Succescriteria verdeeld in niveaus
+ +
minimaal
Nederlandse overheid
Internationaal
Europese wetgeving in ontwikkeling
In wetten en regelgeving wereldwijd
waar mogelijk

30. Triple A
waar mogelijk
Geen standaardeis voor hele
site, maar maak gebruik van
AAA-punten.
Bijvoorbeeld:
• Duidelijke en duurzame
URI’s
• Leesniveau
• Superduidelijke linktekst
• Paragraafkoppen

31. Logo’s Waarmerk drempelvrij.nl
NNiivveeaauu 11
WCAG 2.0, niveau A
NNiivveeaauu 22
WCAG 2.0, niveau AA
NNiivveeaauu 33
Webrichtlijnen 2, niveau AA
Internationale
richtlijnen
Nederlandse
Overheids-
standaard
NNiivveeaauu 11
Webrichtlijnen 2, niveau A

32. Van richtlijnen versie 1 naar 2
VVEERRNNIIEEUUWWDD!!!!!!
Richtlijnen voor het web van
nu en straks.. Werkzaamheid
zonder JavaScript niet vereist!
Ook geschikt voor
formaten als PDF en
toekomstige technologieën.
Pas op: meer mogelijkheden

33. Uitgelicht
• ‘Verzameling webpagina’s’ en proces
• ‘Conforme alternatieve versie’
• Beweging pauzeren
• Formulieren
• Foutpreventie en hulp

34. Uitgelicht
• Online documenten
• Zelfde eisen als aan (HTML-)pagina’s
• Toegankelijk / toegankelijk alternatief
• Huisstijl, contrast en PDF

35. Voorbeeld PDF (demo)

36. Lastige succescriteria ?
Niet
benaderen
als technisch
probleem

37. Organisatie
Organisatorische
benadering:
Strategie, mandaat,
processen,
afspraken

38. Fabels en feiten

39. Raadpleeg bron of onafhankelijk expert
Je kan net zo goed
toetsen met een checklist
of tool. Sommige informatie is minder
belangrijk. Dat hoeft niet
toegankelijk
Volgens de richtlijnen
mag je niet …
De bouwer zorgt dat
het voldoet aan
de webrichtlijnen
Die webrichtlijn bijt
met het SEO-advies.
HTML 5 en CSS3
mogen niet, want dan
krijg je geen logo
Het is niet mogelijk aan alle
richtlijnen te voldoen.
Toegankelijkheid
kan net zo makkelijk
in fase 2
Met pas-toe-of-leg-
uit zeg je gewoon
wat je niet
toegankelijk maakt.
Als je niet voldoet
aan de richtlijnen
kan het ook
toegankelijk zijn.
Een toetsing is zwart-wit. Met
1 fout voldoe je niet.
We gaan waar
mogelijk voldoen …
Niet alle richtlijnen
zijn even belangrijk.

40. Vragen?
Iacobien Riezebosch
iacobien.nl
@iacobien
info@iacobien.nl
Artikelen op iacobien.nl/artikelen/

41. • Foto van vrouw met typemachine bij de Seine, 1947: Robert Doisneau from
Parisiennes ISBN-13:978-2-0803-0037-9
• A key globe by Todor Petkov :
http://www.flickr.com/photos/todpetkov/2680783476/
• Netherlands Grunge Flag door Nicolas Raymond:
http://www.flickr.com/photos/80497449@N04/7378088150/
• Extra Large Red Heart door Bill Ward:
http://www.flickr.com/photos/billward/3314459079/
• Eyes wide open door little phat:
http://www.flickr.com/photos/phattys_pics/3625188205/
• Time machine door thethreesisters:
• http://www.flickr.com/photos/tripletsisters/6795243547/
• Scattered puzzle pieces next to solved fragment door Horia Varlan:
http://www.flickr.com/photos/horiavarlan/4273913228/
• © schema’s en iconen WCAG 2.0, Webrichtlijnen versie 2, Waarneembaar,
Bedienbaar, Begrijpelijk, Robuust en Universeel: Iacobien Riezebosch, 2013
Copyright en foto’s