103
Accesibi Voodoo-Werkzeuge für Frontend-Entwickler Barrierefreiheit sichern! Peter Rozek, 12.10.2010
| Date post: | 20-Aug-2015 |
| Category: |
Technology |
| Upload: | peter-rozek |
| View: | 925 times |
| Download: | 0 times |
AccesibilityVoodoo-Werkzeuge für Frontend-Entwickler
Barrierefreiheit sichern!
Peter Rozek, 12.10.2010
AccesibilityPeter Rozek
...
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.
AccesibilityInhalt...
Accesibility•Grundlage Barrierefreiheit•Werkzeuge•Praxis
Inhalt:
AccesibilityGrundlage
Damit wir barrierefreie Webseiten erstellen können, unterstützt uns die die Web Content Accessibility Guidlines (WCAG) 2.0Accesibility
WCAG 2.0W3C Recommendation 11. 12. 2008
Accesibility
WCAG 2.0 (DE)Autorisierte deutsche Übersetzung vom 29. 10. 2009Accesibility
BITV 2.0 . . . ?
Accesibility
Wann kommt die BITV 2.0?
Accesibility
Gute Frage!
Accesibility
... Schritt für Schritt zur BITV 2.0
Accesibility
Die vier Prinzipien der WCAG 2.0
Accesibility
1. Wahrnehmbar2. Bedienbar3. Verständlich4. RobustAccesibility
Unter den Prinzipien stehen die Richtlinien.
Accesibility
Für jede Richtlinie werden testbare Erfolgskriterien zur Verfügung gestellt.Accesibility
Für die Richtlinien und Erfolgskriterien sind Techniken dokumentiert.
Accesibility
Damit wir barrierefrei entwickeln können brauchen wir verlässliche Werkzeuge, die uns valide Ergebnisse liefern.Accesibility
Werkzeugeeine Auswahl...Accesibility
Accesibility
Web-Developer Toolbar
WAVE-Toolbar
Juicy Studio Accessibility Toolbar
Firebug
AccesibilityWeb Developer Toolbar
Accesibility•Ansicht in beliebiger Auflösung•CSS direkt verändern•Elemente ausblenden•JavaScript deaktivieren
AccesibilityWAVE Toolbar
WAVE Toolbar
AccesibilityPlugin mit nützlichen Funktionen für die Prüfung auf Zugänglichkeit
AccesibilityJuicy Studio Accessibility Toolbar
Juicy Studio Accessibility Toolbar
Accesibility•Document landmarks•Roles and Properties•Table Inspector•Farbkontraste
Prüfung von WAI-ARIA-Elementen
Praxiseine Auswahl...Accesibility
AccesibilityKontrastOhne Farbe
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
NavigierbarÜberschriften und Beschriftungen (Labels)Accesibility
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
Linearisierbarkeit
AccesibilityWichtiges Kriterium in der Barrierefreiheit
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
SyntaxanalyseKompatibilität mit Benutzeragenten und assistierender Technik.Accesibility
Web-Developer-Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
NavigierbarÜberschriften und Beschriftungen (Labels)Accesibility
WAVE Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
AccesibilityKontrastVorder- und Hintergrundfarbe
Juicy Studio Accessibility Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
AccesibilityWAI-ARIAPrüfung von WAI-ARIA-Elementen
Juicy Studio Accessibility Toolbar*
Test mit:
* Add-on für FirefoxAccesibility
AccesibilityFirebug
Accesibility•CSS Layouts überprüfen•DOM-Objekte anzeigen und editieren•Analyse der Ladezeit einzelner Objekte
wofür brauche ich Firebug...
Accesibility
Performance Optimierung = schnellere Webseiten
Accesibility
Einflussfaktoren auf die Ladezeit...
Accesibility
Accesibility•Bandbreite•Gesamtvolumen der Website•Anzahl der zu ladenden Objekte (HTTP-Requets)
Wo kann man optimieren...
Accesibility
Accesibility•HTML•CSS•JavaScript•Grafiken
AccesibilityHTML
Accesibility•Webstandards•Trennung von Struktur, Design und Interaktion•Valides HTML
Accesibility•Kommentare entfernen•CSS und JavaScript in externe Dateien
AccesibilityCSS
Accesibility
Schreibweise optimieren#container { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}
#container { margin: 5px 10px;}
Accesibility•minify CSS•CSS Dateien zusammenfassen
Firebug*
Test mit:
* Add-on für FirefoxAccesibility
AccesibilityPeter Rozek, 12.10.2010
Vielen Dank für Ihre
Aufmerksamkeit
?AccesibilityPeter Rozek, 12.10.2010
Fragen
