SlideShare ist ein Scribd-Unternehmen logo
1 von 58
WCAG 2.0 Die Richtlinien für barrierefreie Webinhalte 2.0 Web Content Accessibility Guidlines 2.0 Access-for-all.ch 22.10.2009 «Zugang für alle» Schweizerische Stiftung zur  behindertengerechten Technologienutzung Sven Jenzer, Interaction Designer MAS, Stiftung «Zugang für alle» Kontakt: sven.jenzer@access-for-all.ch
Inhalt ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Die Autoren der WCAG ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
Der Aufbau der WCAG 2 – der Standard ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Der Aufbau der WCAG 2 ,[object Object],[object Object],[object Object],[object Object],WCAG 2.0 ,[object Object],[object Object],[object Object],WCAG erfüllen ,[object Object],[object Object],Techniken ,[object Object],[object Object],[object Object],Verstehen Normativer W3C-Standard Anpassbare Referenz Informativ, erweiterbar Informativ, erweiterbar
Die WCAG 2.0 Prinzipien ,[object Object],[object Object],[object Object],[object Object]
Prinzip 1: Wahrnehmbar ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Prinzip 2: Bedienbar ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Prinzip 3: Verständlich ,[object Object],[object Object],[object Object],[object Object],[object Object]
Prinzip 4: Robust ,[object Object],[object Object],[object Object]
Beispiel einer Richtlinie und ihren Erfolgskriterien Alternativ-Text:“Blindenführhund Leo“ Beispiel-Beurteilung Alternativtext von Bildern:
Beispiel einer Richtlinie und ihren Erfolgskriterien
Beispiel Richtlinie 1.1 und Erfolgskriterium 1.1.1
Erfolgskriterium 1.1.1 verstehen
Erfolgskriterium 1.1.1 erfüllen ,[object Object],[object Object],[object Object]
Beispiel einer Technik für EK 1.1.1 ,[object Object],[object Object],[object Object],[object Object],G = Generelle Techniken H = HTML Techniken S = Scripting Techniken T = Text Techniken A = ARIA Techniken F = Failures
[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
Konformitätsbedingungen ,[object Object],[object Object],[object Object],[object Object],[object Object]
1. Konformitätsstufen ,[object Object],[object Object],[object Object],[object Object]
2. Ganze Seiten ,[object Object],[object Object],[object Object],[object Object]
2.b. Partielle Konformität – Inhalte von Dritten ,[object Object],[object Object],[object Object],[object Object]
3. Vollständiger Prozess ,[object Object],[object Object]
4. Die Barrierefreiheit unterstützend ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
5. Nicht störend ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Konformitätserklärung ,[object Object],[object Object]
Konformitätserklärung ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Beispiel einer Konformitätserklärung ,[object Object],[object Object],[object Object],Die Qualitäts-Stufen korrespondieren mit den WCAG 2-Leveln:
[object Object]
Konformität WCAG 2 und P028 ,[object Object],[object Object],[object Object]
P028 Empfehlungen verglichen mit WCAG 2 Empfehlungen P028 (ergänzend zu WCAG 1, Level AA) Richtlinien aus den WCAG 1 Level AAA Korrespondierende  Richtllinie/n WCAG 2.0 4.2 Spezifizieren Sie die Ausschreibung jeder Abkürzung und jedes Akronyms an der Stelle des ersten Auftretens. 3.1.4. AAA 4.3 Machen Sie die vorherrschende natürliche Sprache des Dokuments kenntlich. 3.1.1 A 9.4 Definieren Sie eine logische Tab-Reihenfolge für Links, Formular-Kontrollelemente und Objekte. 2.1.2 A 9.5 Stellen Sie Tastatur-Kurzbefehle (Shortcuts) für wichtige Links (einschließlich solcher in Client-seitigen Imagemaps), Formular-Kontrollelemente und Gruppen von Formular-Kontrollelementen bereit. 2.4.5 AA 11.3 Stellen Sie Informationen bereit, so dass Benutzer Dokumente entsprechend ihren Vorgaben (Sprache, Typ usw.) erhalten können. - 13.6 Gruppieren Sie verwandte Links, identifizieren Sie die Gruppe (für Benutzeragenten), und ermöglichen Sie das Überspringen der Gruppe, bis Benutzeragenten dies gestatten. 1.3.1 2.4.1 2.4.6 A A AA 13.8 Platzieren Sie unterscheidungskräftige Information an den Anfang von Überschriften, Absätzen, Listen usw. 1.3.2 A 13.9 Stellen Sie Informationen über Zusammenstellungen von Dokumenten bereit (z.B. Dokumente, die aus mehreren Seiten bestehen usw.) 2.4.5 AA 14.3 Verwenden Sie einen Präsentationsstil, der über Seiten hinweg konsistent ist. 3.2.3 3.2.4 AA AA 5.5 Stellen Sie Zusammenfassungen für Tabellen bereit. 1.3.1 A
Konformität WCAG 2 und P028 ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
WCAG 2 als Evaluationsinstrument ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
WCAG 2 als Evaluationsinstrument ,[object Object],[object Object],[object Object],[object Object]
WCAG 2 als Evaluationsinstrument http://www.w3.org/WAI/WCAG20/quickref/Overview.php
WCAG 1 (2) als Evaluationsinstrument ,[object Object],[object Object],WCAG 2 Checkliste derzeit in Arbeit (bis ca. Mai 2010 erwartet) In Deutsch und Französisch Link:  www.ch.ch/accessibility/
WCAG 2 als Evaluationsinstrument ,[object Object],[object Object],[object Object],[object Object],Zertifizierte barrierefreie Website «access for all» www.access-for-all.ch/zertifikat/   Die drei Qualitäts-Stufen:
WCAG 2 als Evaluationsinstrument Accessibility im Entwicklungsprozess Anforderungen- Analyse/ Entwurf Design & Konstruktion Übergabe Sensibilisierung Beteiligte Möglichkeiten  der Accessibility Detail Tests Zertifizierung
[object Object],[object Object]
WCAG 1 und 2 – Unterschiede ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Neuer Farbkontrast-Messalgorythmus WCAG 1.0 WCAG 2.0
Präzisere Anforderungen an Formulare ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Scripting zugelassen und zu evaluieren ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Scripting zugelassen und zu evaluieren
Präzisere Anforderungen an Multimedia ,[object Object],[object Object],[object Object],[object Object],[object Object]
Präzisere Anforderungen an Tastaturbedienung ,[object Object],[object Object],[object Object]
Präzisere Anforderungen bei dynamischen Inhalten ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ein wichtiges AAA-Kriterium ,[object Object],Empfohlene Technik Gebärdensprachvideos G60:  http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G160
[object Object]
Präzisere Anforderungen bei dynamischen Inhalten ARIA1:  Using ARIA describedby property to provide a descriptive, programmatically determined label ARIA2:  Identifying required fields with the "required" property ARIA3:  Identifying valid range information with the "valuemin" and "valuemax" properties ARIA4:  Using ARIA to programmatically identify form fields as required …  wird erweitert
Präzisere Anforderungen bei dynamischen Inhalten ,[object Object],[object Object],[object Object],[object Object]
HTML 5 bringt zahlreiche Verbesserungen ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object]
Schlussbemerkung ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fragen an das Publikum ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]

Weitere ähnliche Inhalte

Ähnlich wie WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
Mandy Goram
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
Eric Eggert
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
Peter Rozek
 
Bibforge
BibforgeBibforge
Bibforge
cmahnke
 
04web 1 Und Web 2
04web 1 Und Web 204web 1 Und Web 2
04web 1 Und Web 2
guest93c630
 

Ähnlich wie WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0 (20)

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
Barrierefreie Website planen, entwickeln, unterhalten, testen. Qualitätssiche...
 
Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommtHerausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
01-2015 - Java aktuell - Mandy Goram - Entwicklung mobiler Anwendungen für Bl...
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
Präsentation für den Workshop "Schreiben fürs Web/Optimierung der Usability"
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
Nutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise WikisNutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise Wikis
 
Tools zur Diagnose von Weblogic Performanceengpässen und Fehlerzuständen
Tools zur Diagnose von Weblogic Performanceengpässen und FehlerzuständenTools zur Diagnose von Weblogic Performanceengpässen und Fehlerzuständen
Tools zur Diagnose von Weblogic Performanceengpässen und Fehlerzuständen
 
Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020Web460 ppt-de-jul-wi-web-all-2020
Web460 ppt-de-jul-wi-web-all-2020
 
Barrierefreiheit auf wien.at
Barrierefreiheit auf wien.atBarrierefreiheit auf wien.at
Barrierefreiheit auf wien.at
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Schieder Didazwiki
Schieder DidazwikiSchieder Didazwiki
Schieder Didazwiki
 
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
WCAG 2.0 mehr als nur ein Standard, Synergien zwischen Usability und Accessib...
 
PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...
PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...
PDF und Barrierefreiheit - Bringt der neue ISO-Standard PDF/UA Universal Acce...
 
Bibforge
BibforgeBibforge
Bibforge
 
Bibforge
BibforgeBibforge
Bibforge
 
C2 Teamwork Portal Mit Web Sphere 6.0
C2 Teamwork Portal Mit Web Sphere 6.0C2 Teamwork Portal Mit Web Sphere 6.0
C2 Teamwork Portal Mit Web Sphere 6.0
 
04web 1 Und Web 2
04web 1 Und Web 204web 1 Und Web 2
04web 1 Und Web 2
 

WCAG 2 - Die Richtlinien für barrierefreie Webinhalte 2.0

  • 1. WCAG 2.0 Die Richtlinien für barrierefreie Webinhalte 2.0 Web Content Accessibility Guidlines 2.0 Access-for-all.ch 22.10.2009 «Zugang für alle» Schweizerische Stiftung zur behindertengerechten Technologienutzung Sven Jenzer, Interaction Designer MAS, Stiftung «Zugang für alle» Kontakt: sven.jenzer@access-for-all.ch
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12. Beispiel einer Richtlinie und ihren Erfolgskriterien Alternativ-Text:“Blindenführhund Leo“ Beispiel-Beurteilung Alternativtext von Bildern:
  • 13. Beispiel einer Richtlinie und ihren Erfolgskriterien
  • 14. Beispiel Richtlinie 1.1 und Erfolgskriterium 1.1.1
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32. P028 Empfehlungen verglichen mit WCAG 2 Empfehlungen P028 (ergänzend zu WCAG 1, Level AA) Richtlinien aus den WCAG 1 Level AAA Korrespondierende Richtllinie/n WCAG 2.0 4.2 Spezifizieren Sie die Ausschreibung jeder Abkürzung und jedes Akronyms an der Stelle des ersten Auftretens. 3.1.4. AAA 4.3 Machen Sie die vorherrschende natürliche Sprache des Dokuments kenntlich. 3.1.1 A 9.4 Definieren Sie eine logische Tab-Reihenfolge für Links, Formular-Kontrollelemente und Objekte. 2.1.2 A 9.5 Stellen Sie Tastatur-Kurzbefehle (Shortcuts) für wichtige Links (einschließlich solcher in Client-seitigen Imagemaps), Formular-Kontrollelemente und Gruppen von Formular-Kontrollelementen bereit. 2.4.5 AA 11.3 Stellen Sie Informationen bereit, so dass Benutzer Dokumente entsprechend ihren Vorgaben (Sprache, Typ usw.) erhalten können. - 13.6 Gruppieren Sie verwandte Links, identifizieren Sie die Gruppe (für Benutzeragenten), und ermöglichen Sie das Überspringen der Gruppe, bis Benutzeragenten dies gestatten. 1.3.1 2.4.1 2.4.6 A A AA 13.8 Platzieren Sie unterscheidungskräftige Information an den Anfang von Überschriften, Absätzen, Listen usw. 1.3.2 A 13.9 Stellen Sie Informationen über Zusammenstellungen von Dokumenten bereit (z.B. Dokumente, die aus mehreren Seiten bestehen usw.) 2.4.5 AA 14.3 Verwenden Sie einen Präsentationsstil, der über Seiten hinweg konsistent ist. 3.2.3 3.2.4 AA AA 5.5 Stellen Sie Zusammenfassungen für Tabellen bereit. 1.3.1 A
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. WCAG 2 als Evaluationsinstrument http://www.w3.org/WAI/WCAG20/quickref/Overview.php
  • 38.
  • 39.
  • 40. WCAG 2 als Evaluationsinstrument Accessibility im Entwicklungsprozess Anforderungen- Analyse/ Entwurf Design & Konstruktion Übergabe Sensibilisierung Beteiligte Möglichkeiten der Accessibility Detail Tests Zertifizierung
  • 41.
  • 42.
  • 44.
  • 45.
  • 46. Scripting zugelassen und zu evaluieren
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. Präzisere Anforderungen bei dynamischen Inhalten ARIA1: Using ARIA describedby property to provide a descriptive, programmatically determined label ARIA2: Identifying required fields with the "required" property ARIA3: Identifying valid range information with the "valuemin" and "valuemax" properties ARIA4: Using ARIA to programmatically identify form fields as required … wird erweitert
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.

Hinweis der Redaktion

  1. Die Prinzipien und ihre Richtlinien sind so allgemein wir möglich formuliert damit sie sich auf beliebige Techniken anwenden lassen .