1. Barrierefreiheit
sichern!
Voodoo-Werkzeuge für
Frontend-Entwickler
Accesibi
Peter Rozek, 12.10.2010

2. Peter Rozek
...
Accesibi

3. ... 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
Accesibi
aufgenommen und Unterstützer im
Aktionsbündnis für barrierefreie
Informationstechnik.

4. Inhalt...
Accesibi

5. Inhalt:
• Grundlage
Barrierefreiheit
• Werkzeuge
Accesibi
• Praxis

6. Grundlage
Accesibi

7. Damit wir barrierefreie Webseiten
erstellen können, unterstützt uns die
die Web Content Accessibility
Accesibi
Guidlines (WCAG) 2.0

8. WCAG 2.0
W3C Recommendation 11. 12. 2008
Accesibi

9. WCAG 2.0 (DE)
Autorisierte deutsche Übersetzung
Accesibi
vom 29. 10. 2009

11. BITV 2.0 . . . ?
Accesibi

12. Wann kommt die BITV 2.0?
Accesibi

13. Gute Frage!
Accesibi

14. ... Schritt für Schritt zur BITV 2.0
Accesibi

15. Die vier Prinzipien
der WCAG 2.0
Accesibi

16. 1. Wahrnehmbar
2. Bedienbar
3. Verständlich
Accesibi
4. Robust

17. Unter den Prinzipien
stehen die Richtlinien.
Accesibi

18. Für jede Richtlinie
werden testbare
Erfolgskriterien zur
Accesibi
Verfügung gestellt.

19. Für die Richtlinien und
Erfolgskriterien sind
Techniken dokumentiert.
Accesibi

20. Damit wir barrierefrei entwickeln
können brauchen wir verlässliche
Werkzeuge, die uns valide Ergebnisse
Accesibi
liefern.

21. Werkzeuge
Accesibi
eine Auswahl...

22. Web-Developer Toolbar
WAVE-Toolbar
Juicy Studio Accessibility Toolbar
Accesibi
Firebug

23. Accesibi
Web Developer Toolbar

24. • Ansicht in beliebiger
Auflösung
• CSS direkt verändern
• Elemente ausblenden
Accesibi
• JavaScript deaktivieren

25. WAVE Toolbar
Accesibi
WAVE Toolbar

26. Plugin mit nützlichen
Funktionen für die
Prüfung auf
Accesibi
Zugänglichkeit

27. Juicy Studio
Accessibility
Toolbar
Accesibi
Juicy Studio Accessibility Toolbar

28. Prüfung von WAI-ARIA-
Elementen
• Document landmarks
• Roles and Properties
Accesibi
• Table Inspector
• Farbkontraste

29. Praxis
Accesibi
eine Auswahl...

30. Kontrast
Ohne Farbe
Accesibi

31. Test mit:
Web-Developer-
Toolbar*
Accesibi
* Add-on für Firefox

37. Navigierbar
Überschriften und
Accesibi
Beschriftungen (Labels)

38. Test mit:
Web-Developer-
Toolbar*
Accesibi
* Add-on für Firefox

51. Linearisierbarkeit
Wichtiges Kriterium in der
Accesibi
Barrierefreiheit

52. Test mit:
Web-Developer-
Toolbar*
Accesibi
* Add-on für Firefox

58. Syntaxanalyse
Kompatibilität mit Benutzeragenten
Accesibi
und assistierender Technik.

59. Test mit:
Web-Developer-
Toolbar*
Accesibi
* Add-on für Firefox

66. Navigierbar
Überschriften und
Accesibi
Beschriftungen (Labels)

67. Test mit:
WAVE Toolbar*
Accesibi
* Add-on für Firefox

73. Kontrast
Vorder- und Hintergrundfarbe
Accesibi

74. Test mit:
Juicy Studio
Accessibility
Accesibi
Toolbar*
* Add-on für Firefox

80. WAI-ARIA
Prüfung von WAI-ARIA-Elementen
Accesibi

81. Test mit:
Juicy Studio
Accessibility
Accesibi
Toolbar*
* Add-on für Firefox

84. Firebug
Accesibi

85. • CSS Layouts überprüfen
• DOM-Objekte anzeigen
und editieren
• Analyse der Ladezeit
Accesibi
einzelner Objekte

86. wofür brauche ich
Firebug...
Accesibi

87. Performance Optimierung
= schnellere Webseiten
Accesibi

88. Einflussfaktoren auf die
Ladezeit...
Accesibi

89. • Bandbreite
• Gesamtvolumen der
Website
• Anzahl der zu ladenden
Accesibi
Objekte (HTTP-Requets)

90. Wo kann man optimieren...
Accesibi

91. • HTML
• CSS
• JavaScript
Accesibi
• Grafiken

92. HTML
Accesibi

93. • Webstandards
• Trennung von Struktur,
Design und Interaktion
Accesibi
• Valides HTML

94. • Kommentare entfernen
• CSS und JavaScript in
externe Dateien
Accesibi

95. CSS
Accesibi

96. Schreibweise optimieren
#container {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
Accesibi
#container {
}
margin: 5px 10px;

97. • minify CSS
• CSS Dateien
zusammenfassen
Accesibi

98. Test mit:
Firebug*
Accesibi
* Add-on für Firefox

101. Vielen Dank für
Ihre
Aufmerksamkeit
Accesibi
Peter Rozek, 12.10.2010

102. Fragen
Accesibi
Peter Rozek, 12.10.2010

103. E-Mail: peter.rozek@complexx.com
E-Mail: rozek.p@think-green.de
Twitter: webinterface
Accesibi
Peter Rozek, 12.10.2010