Barrierefreiheit
       sichern!
             Voodoo-Werkzeuge für
              Frontend-Entwickler



Accesibi
Peter Roz...
Peter Rozek
      ...

Accesibi
... seit 2010 bei der ecomplexx GmbH als
Frontend-Developer für die barrierefreie und
gebrauchtsaugliche Entwicklung von W...
Inhalt...
Accesibi
Inhalt:

• Grundlage
  Barrierefreiheit
• Werkzeuge



Accesibi
• Praxis
Grundlage
Accesibi
Damit wir barrierefreie Webseiten
erstellen können, unterstützt uns die
die Web Content Accessibility



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



Accesibi
WCAG 2.0 (DE)
Autorisierte deutsche Übersetzung



Accesibi
vom 29. 10. 2009
BITV 2.0 . . . ?

Accesibi
Wann kommt die BITV 2.0?




Accesibi
Gute Frage!




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




Accesibi
Die vier Prinzipien
der WCAG 2.0

Accesibi
1. Wahrnehmbar
2. Bedienbar
3. Verständlich


Accesibi
4. Robust
Unter den Prinzipien
stehen die Richtlinien.


Accesibi
Für jede Richtlinie
werden testbare
Erfolgskriterien zur


Accesibi
Verfügung gestellt.
Für die Richtlinien und
Erfolgskriterien sind
Techniken dokumentiert.

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



Accesibi
liefer...
Werkzeuge
Accesibi
eine Auswahl...
Web-Developer Toolbar

WAVE-Toolbar

Juicy Studio Accessibility Toolbar




Accesibi
Firebug
Accesibi
  Web Developer Toolbar
• Ansicht in beliebiger
  Auflösung
• CSS direkt verändern
• Elemente ausblenden


Accesibi
• JavaScript deaktivieren
WAVE Toolbar

Accesibi
     WAVE Toolbar
Plugin mit nützlichen
Funktionen für die
Prüfung auf


Accesibi
Zugänglichkeit
Juicy Studio
Accessibility
Toolbar
Accesibi
 Juicy Studio Accessibility Toolbar
Prüfung von WAI-ARIA-
Elementen
• Document landmarks
• Roles and Properties



Accesibi
• Table Inspector
• Farbkontraste
Praxis
Accesibi
eine Auswahl...
Kontrast
Ohne Farbe



Accesibi
Test mit:

Web-Developer-
Toolbar*

Accesibi
* Add-on für Firefox
Navigierbar
Überschriften und



Accesibi
Beschriftungen (Labels)
Test mit:

Web-Developer-
Toolbar*

Accesibi
* Add-on für Firefox
Linearisierbarkeit
Wichtiges Kriterium in der



Accesibi
Barrierefreiheit
Test mit:

Web-Developer-
Toolbar*

Accesibi
* Add-on für Firefox
Syntaxanalyse
Kompatibilität mit Benutzeragenten



Accesibi
und assistierender Technik.
Test mit:

Web-Developer-
Toolbar*

Accesibi
* Add-on für Firefox
Navigierbar
Überschriften und



Accesibi
Beschriftungen (Labels)
Test mit:


WAVE Toolbar*

Accesibi
* Add-on für Firefox
Kontrast
Vorder- und Hintergrundfarbe



Accesibi
Test mit:

Juicy Studio
Accessibility

Accesibi
Toolbar*
* Add-on für Firefox
WAI-ARIA
Prüfung von WAI-ARIA-Elementen



Accesibi
Test mit:

Juicy Studio
Accessibility

Accesibi
Toolbar*
* Add-on für Firefox
Firebug

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


Accesibi
  einzelner Objekte
wofür brauche ich
Firebug...


Accesibi
Performance Optimierung
= schnellere Webseiten


Accesibi
Einflussfaktoren auf die
Ladezeit...


Accesibi
• Bandbreite
• Gesamtvolumen   der
  Website
• Anzahl der zu ladenden


Accesibi
  Objekte (HTTP-Requets)
Wo kann man optimieren...



Accesibi
• HTML
• CSS
• JavaScript



Accesibi
• Grafiken
HTML

Accesibi
• Webstandards
• Trennung von Struktur,
  Design und Interaktion


Accesibi
• Valides HTML
• Kommentare entfernen
• CSS und JavaScript in
 externe Dateien

Accesibi
CSS

Accesibi
Schreibweise optimieren
#container {
   margin-top: 5px;
   margin-right: 10px;
   margin-bottom: 5px;
   margin-left: 10p...
• minify CSS
• CSS Dateien
 zusammenfassen

Accesibi
Test mit:


Firebug*

Accesibi
* Add-on für Firefox
Vielen Dank für
         Ihre
  Aufmerksamkeit
Accesibi
Peter Rozek, 12.10.2010
Fragen


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




Accesibi
Peter Rozek, 12.10.2010
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler
Nächste SlideShare
Wird geladen in …5
×

Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler

1.168 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.168
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler

  1. 1. Barrierefreiheit sichern! Voodoo-Werkzeuge für Frontend-Entwickler Accesibi Peter Rozek, 12.10.2010
  2. 2. Peter Rozek ... Accesibi
  3. 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. 4. Inhalt... Accesibi
  5. 5. Inhalt: • Grundlage Barrierefreiheit • Werkzeuge Accesibi • Praxis
  6. 6. Grundlage Accesibi
  7. 7. Damit wir barrierefreie Webseiten erstellen können, unterstützt uns die die Web Content Accessibility Accesibi Guidlines (WCAG) 2.0
  8. 8. WCAG 2.0 W3C Recommendation 11. 12. 2008 Accesibi
  9. 9. WCAG 2.0 (DE) Autorisierte deutsche Übersetzung Accesibi vom 29. 10. 2009
  10. 10. BITV 2.0 . . . ? Accesibi
  11. 11. Wann kommt die BITV 2.0? Accesibi
  12. 12. Gute Frage! Accesibi
  13. 13. ... Schritt für Schritt zur BITV 2.0 Accesibi
  14. 14. Die vier Prinzipien der WCAG 2.0 Accesibi
  15. 15. 1. Wahrnehmbar 2. Bedienbar 3. Verständlich Accesibi 4. Robust
  16. 16. Unter den Prinzipien stehen die Richtlinien. Accesibi
  17. 17. Für jede Richtlinie werden testbare Erfolgskriterien zur Accesibi Verfügung gestellt.
  18. 18. Für die Richtlinien und Erfolgskriterien sind Techniken dokumentiert. Accesibi
  19. 19. Damit wir barrierefrei entwickeln können brauchen wir verlässliche Werkzeuge, die uns valide Ergebnisse Accesibi liefern.
  20. 20. Werkzeuge Accesibi eine Auswahl...
  21. 21. Web-Developer Toolbar WAVE-Toolbar Juicy Studio Accessibility Toolbar Accesibi Firebug
  22. 22. Accesibi Web Developer Toolbar
  23. 23. • Ansicht in beliebiger Auflösung • CSS direkt verändern • Elemente ausblenden Accesibi • JavaScript deaktivieren
  24. 24. WAVE Toolbar Accesibi WAVE Toolbar
  25. 25. Plugin mit nützlichen Funktionen für die Prüfung auf Accesibi Zugänglichkeit
  26. 26. Juicy Studio Accessibility Toolbar Accesibi Juicy Studio Accessibility Toolbar
  27. 27. Prüfung von WAI-ARIA- Elementen • Document landmarks • Roles and Properties Accesibi • Table Inspector • Farbkontraste
  28. 28. Praxis Accesibi eine Auswahl...
  29. 29. Kontrast Ohne Farbe Accesibi
  30. 30. Test mit: Web-Developer- Toolbar* Accesibi * Add-on für Firefox
  31. 31. Navigierbar Überschriften und Accesibi Beschriftungen (Labels)
  32. 32. Test mit: Web-Developer- Toolbar* Accesibi * Add-on für Firefox
  33. 33. Linearisierbarkeit Wichtiges Kriterium in der Accesibi Barrierefreiheit
  34. 34. Test mit: Web-Developer- Toolbar* Accesibi * Add-on für Firefox
  35. 35. Syntaxanalyse Kompatibilität mit Benutzeragenten Accesibi und assistierender Technik.
  36. 36. Test mit: Web-Developer- Toolbar* Accesibi * Add-on für Firefox
  37. 37. Navigierbar Überschriften und Accesibi Beschriftungen (Labels)
  38. 38. Test mit: WAVE Toolbar* Accesibi * Add-on für Firefox
  39. 39. Kontrast Vorder- und Hintergrundfarbe Accesibi
  40. 40. Test mit: Juicy Studio Accessibility Accesibi Toolbar* * Add-on für Firefox
  41. 41. WAI-ARIA Prüfung von WAI-ARIA-Elementen Accesibi
  42. 42. Test mit: Juicy Studio Accessibility Accesibi Toolbar* * Add-on für Firefox
  43. 43. Firebug Accesibi
  44. 44. • CSS Layouts überprüfen • DOM-Objekte anzeigen und editieren • Analyse der Ladezeit Accesibi einzelner Objekte
  45. 45. wofür brauche ich Firebug... Accesibi
  46. 46. Performance Optimierung = schnellere Webseiten Accesibi
  47. 47. Einflussfaktoren auf die Ladezeit... Accesibi
  48. 48. • Bandbreite • Gesamtvolumen der Website • Anzahl der zu ladenden Accesibi Objekte (HTTP-Requets)
  49. 49. Wo kann man optimieren... Accesibi
  50. 50. • HTML • CSS • JavaScript Accesibi • Grafiken
  51. 51. HTML Accesibi
  52. 52. • Webstandards • Trennung von Struktur, Design und Interaktion Accesibi • Valides HTML
  53. 53. • Kommentare entfernen • CSS und JavaScript in externe Dateien Accesibi
  54. 54. CSS Accesibi
  55. 55. Schreibweise optimieren #container { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } Accesibi #container { } margin: 5px 10px;
  56. 56. • minify CSS • CSS Dateien zusammenfassen Accesibi
  57. 57. Test mit: Firebug* Accesibi * Add-on für Firefox
  58. 58. Vielen Dank für Ihre Aufmerksamkeit Accesibi Peter Rozek, 12.10.2010
  59. 59. Fragen Accesibi Peter Rozek, 12.10.2010
  60. 60. E-Mail: peter.rozek@complexx.com E-Mail: rozek.p@think-green.de Twitter: webinterface Accesibi Peter Rozek, 12.10.2010

×