Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler

1,008
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,008
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×