SlideShare ist ein Scribd-Unternehmen logo
1 von 103
Downloaden Sie, um offline zu lesen
Barrierefreiheit
       sichern!
             Voodoo-Werkzeuge für
              Frontend-Entwickler



Accesibi
Peter Rozek, 12.10.2010
Peter Rozek
      ...

Accesibi
... 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.
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
Guidlines (WCAG) 2.0
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
liefern.
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: 10px;
}




Accesibi
#container {

}
   margin: 5px 10px;
• 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

Weitere ähnliche Inhalte

Ähnlich wie Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler

Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Digicomp Academy AG
 

Ähnlich wie Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler (20)

What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...What about Accessibility of Next Generation User Interfaces for People with D...
What about Accessibility of Next Generation User Interfaces for People with D...
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
digital.bewegungsarchive.de - das Digitalisierungsportal für die Archive von ...
digital.bewegungsarchive.de - das Digitalisierungsportal für die Archive von ...digital.bewegungsarchive.de - das Digitalisierungsportal für die Archive von ...
digital.bewegungsarchive.de - das Digitalisierungsportal für die Archive von ...
 
Quo vadis DevOps
Quo vadis DevOpsQuo vadis DevOps
Quo vadis DevOps
 
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Ad...
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Einfach Für Alle - Mit dem KERN UX-Standard zu einer intuitiven und barriere...
Einfach Für Alle - Mit dem KERN UX-Standard  zu einer intuitiven und barriere...Einfach Für Alle - Mit dem KERN UX-Standard  zu einer intuitiven und barriere...
Einfach Für Alle - Mit dem KERN UX-Standard zu einer intuitiven und barriere...
 
Born to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellen
Born to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellenBorn to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellen
Born to be accessible - Barrierefreie PDFs gemäß PDF/UA effizient erstellen
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
WKE2014: The Beauty & The Beast
WKE2014: The Beauty & The BeastWKE2014: The Beauty & The Beast
WKE2014: The Beauty & The Beast
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommtHerausforderung Barrierefreiheit - die ATAG 2.0 kommt
Herausforderung Barrierefreiheit - die ATAG 2.0 kommt
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
Morning Session: Qualitätskriterien für erfolgreiche Websites - für "Nicht-Te...
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam Augustin
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
 
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
 
Swissbib lausanne
Swissbib lausanneSwissbib lausanne
Swissbib lausanne
 
Informationskompetenz ?
Informationskompetenz ? Informationskompetenz ?
Informationskompetenz ?
 

Mehr von Peter Rozek

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Persona driven agile development
Persona driven agile developmentPersona driven agile development
Persona driven agile development
 
Cross Device Experience with HTML Prototyping
Cross Device Experience with HTML PrototypingCross Device Experience with HTML Prototyping
Cross Device Experience with HTML Prototyping
 
Create User Centric UI-Animations
Create User Centric UI-AnimationsCreate User Centric UI-Animations
Create User Centric UI-Animations
 
Responsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of ScreensResponsive Experience und das Continuum of Screens
Responsive Experience und das Continuum of Screens
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 

Barrierefreiheit sichern Voodoo Werkzeuge für Frontend Entwickler