Page 1
AccesibilityVoodoo-Werkzeuge für Frontend-Entwickler
Barrierefreiheit sichern!
Peter Rozek, 12.10.2010
Page 2
AccesibilityPeter Rozek
...
Page 3
Accesibility
... seit 2010 bei der ecomplexx GmbH als Frontend-Developer für die barrierefreie und gebrauchtsaugliche Entwicklung von Websites.
...Usability Professional im AK Barrierefreiheit
... mit think green - neue Medien im Einkaufsführer Barrierefreies Internet aufgenommen und Unterstützer im Aktionsbündnis für barrierefreie Informationstechnik.
Page 4
AccesibilityInhalt...
Page 5
Accesibility•Grundlage Barrierefreiheit•Werkzeuge•Praxis
Inhalt:
Page 6
AccesibilityGrundlage
Page 7
Damit wir barrierefreie Webseiten erstellen können, unterstützt uns die die Web Content Accessibility Guidlines (WCAG) 2.0Accesibility
Page 8
WCAG 2.0W3C Recommendation 11. 12. 2008
Accesibility
Page 9
WCAG 2.0 (DE)Autorisierte deutsche Übersetzung vom 29. 10. 2009Accesibility
Page 11
BITV 2.0 . . . ?
Accesibility
Page 12
Wann kommt die BITV 2.0?
Accesibility
Page 13
Gute Frage!
Accesibility
Page 14
... Schritt für Schritt zur BITV 2.0
Accesibility
Page 15
Die vier Prinzipien der WCAG 2.0
Accesibility
Page 16
1. Wahrnehmbar2. Bedienbar3. Verständlich4. RobustAccesibility
Page 17
Unter den Prinzipien stehen die Richtlinien.
Accesibility
Page 18
Für jede Richtlinie werden testbare Erfolgskriterien zur Verfügung gestellt.Accesibility
Page 19
Für die Richtlinien und Erfolgskriterien sind Techniken dokumentiert.
Accesibility
Page 20
Damit wir barrierefrei entwickeln können brauchen wir verlässliche Werkzeuge, die uns valide Ergebnisse liefern.Accesibility
Page 21
Werkzeugeeine Auswahl...Accesibility
Page 22
Accesibility
Web-Developer Toolbar
WAVE-Toolbar
Juicy Studio Accessibility Toolbar
Firebug
Page 23
AccesibilityWeb Developer Toolbar
Page 24
Accesibility•Ansicht in beliebiger Auflösung•CSS direkt verändern•Elemente ausblenden•JavaScript deaktivieren
Page 25
AccesibilityWAVE Toolbar
WAVE Toolbar
Page 26
AccesibilityPlugin mit nützlichen Funktionen für die Prüfung auf Zugänglichkeit
Page 27
AccesibilityJuicy Studio Accessibility Toolbar
Juicy Studio Accessibility Toolbar
Page 28
Accesibility•Document landmarks•Roles and Properties•Table Inspector•Farbkontraste
Prüfung von WAI-ARIA-Elementen
Page 29
Praxiseine Auswahl...Accesibility
Page 30
AccesibilityKontrastOhne Farbe
Page 31
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 37
NavigierbarÜberschriften und Beschriftungen (Labels)Accesibility
Page 38
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 51
Linearisierbarkeit
AccesibilityWichtiges Kriterium in der Barrierefreiheit
Page 52
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 58
SyntaxanalyseKompatibilität mit Benutzeragenten und assistierender Technik.Accesibility
Page 59
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 66
NavigierbarÜberschriften und Beschriftungen (Labels)Accesibility
Page 67
WAVE Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 73
AccesibilityKontrastVorder- und Hintergrundfarbe
Page 74
Juicy Studio Accessibility Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 80
AccesibilityWAI-ARIAPrüfung von WAI-ARIA-Elementen
Page 81
Juicy Studio Accessibility Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Page 84
AccesibilityFirebug
Page 85
Accesibility•CSS Layouts überprüfen•DOM-Objekte anzeigen und editieren•Analyse der Ladezeit einzelner Objekte
Page 86
wofür brauche ich Firebug...
Accesibility
Page 87
Performance Optimierung = schnellere Webseiten
Accesibility
Page 88
Einflussfaktoren auf die Ladezeit...
Accesibility
Page 89
Accesibility•Bandbreite•Gesamtvolumen der Website•Anzahl der zu ladenden Objekte (HTTP-Requets)
Page 90
Wo kann man optimieren...
Accesibility
Page 91
Accesibility•HTML•CSS•JavaScript•Grafiken
Page 93
Accesibility•Webstandards•Trennung von Struktur, Design und Interaktion•Valides HTML
Page 94
Accesibility•Kommentare entfernen•CSS und JavaScript in externe Dateien
Page 96
Accesibility
Schreibweise optimieren#container { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}
#container { margin: 5px 10px;}
Page 97
Accesibility•minify CSS•CSS Dateien zusammenfassen
Page 98
Firebug*
Test mit:
* Add-on für FirefoxAccesibility
Page 101
AccesibilityPeter Rozek, 12.10.2010
Vielen Dank für Ihre
Aufmerksamkeit
Page 102
?AccesibilityPeter Rozek, 12.10.2010
Fragen
Page 103
AccesibilityPeter Rozek, 12.10.2010
E-Mail: [email protected] : [email protected] : webinterface