SlideShare ist ein Scribd-Unternehmen logo
http://www.patramsey.net/2007/the-accessible-web/
»Tomas Caspers
 berät Industrie, NGOs und
 Behörden, baut Websites,
 schreibt Bücher, bloggt
 und hält Vorträge. «
Barrierefreiheit?




           © http://www.flickr.com/photos/webseeings/239301576/
• USA: Americans with Disabilities Act (ADA)
  • Section 508
• GB: Disability Discrimination Act (DDA)
• EU: Vorgaben für entsprechende Gesetze
  in den Mitgliedsländern
• Deutschland:
  • Behindertengleichstellungsgesetz (BGG)
  • Rechtsverordnung zur Barrierefreien
    Informationstechnik (BITV) ← WCAG!
  • Allgemeines Gleichbehandlungsgesetz (AGG)
»Barrierefrei sind [...] technische Gebrauchs-
gegenstände, Systeme der Informationsver-
arbeitung, akustische und visuelle Informations-
quellen und Kommunikationseinrichtungen [...],
wenn sie für behinderte Menschen in der allgemein
üblichen Weise, ohne besondere Erschwernis und
grundsätzlich ohne fremde Hilfe zugänglich und
nutzbar sind.«
»Barrierefrei sind [...] technische Gebrauchs-

Designing
gegenstände, Systeme der Informationsver-
arbeitung, akustische und visuelle Informations-
 for our
quellen und Kommunikationseinrichtungen [...],


 future
wenn sie für behinderte Menschen in der allgemein
üblichen Weise, ohne besondere Erschwernis und

 selves
grundsätzlich ohne fremde Hilfe zugänglich und
nutzbar sind.«
w3.org/WAI/WAI-AGE/




© http://sean-tron.deviantart.com/art/mosh-109253636
http://twitpic.com/304js/full
Deutsche Übersetzung der WCAG 2.0
Hä?
Deutsche Übersetzung der WCAG 2.0
79%
aller Statistiken
sind gefälscht!
  (diese eingerechnet)
» Behinderung ist die
 mangelnde Fähigkeit,
 mit schlechtem Design
 umgehen zu können. «
Checklisten-
  Syndrom?
10  PRINT  "WCAG"
20  GOTO  10
Deutsche Übersetzung der WCAG 2.0
WCAG 1.0
  vs.
WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
Testbar:



Mond   Kein Mond
Die Prinzipien:
1.   Perceivable
     Information and user interface components must be presentable
     to users in ways they can perceive


2.   Operable
     User interface components and navigation must be operable


3.   Understandable
     Information and the operation of user interface must be understandable


4.   Robust
     Content must be robust enough that it can be interpreted reliably by
     a wide variety of user agents, including assistive technologies

                                                                       http://www.w3.org/TR/WCAG20/
Die Prinzipien:

POUR
»Do not read
 ›Understanding WCAG‹.
  In fact, do not read WCAG 2.
  Web Accessibility is about
  people, not about guidelines.«
                (Shawn Henry, W3C WAI)
LE
                         Percievable

   P                1. Provide equivalent
  M
                   alternatives to auditory
SA

                     and visual content.

                 1.1 Provide a text equivalent
                 for every non-text element.
         1.1.1 Non-text Content: All non-text content
      that is presented to the user has a text alternative
               that serves the equivalent purpose

   G94: Providing short text alternative for non-text content that
  serves the same purpose and presents the same information as
the non-text content [...] Examples: A search button uses an image
   of a magnifying glass. The text alternative is "search" and not
                          "magnifying glass".
Und nun?




           © http://www.flickr.com/photos/chuckbiscuito/161971512/
Jetzt auch auf Deutsch!
      http://wcag2.0-blog.de/2009-07-28/
http://www.w3.org/WAI/intro/wcag20.php
http://www.w3.org/WAI/WCAG20/quickref/
Vorsprung
   durch
Techniques
Wahrnehmbar:
Wahrnehmbar:

   Zum Bestellen drücken Sie
 bitte auf den grünen Knopf:
Wahrnehmbar:
Verteilung der
Farbfehlsichtigkeiten
in der Bevölkerung:



                  farbfehlsichtig

                  Nicht farbfehlsichtig
Wahrnehmbar:
Wahrnehmbar:
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
<img  
src="foo"  
alt="bar">
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
Bedienbar:
Bedienbar:



 (Auflösung: in der Wikipedia nach »Fitts‘s Law« suchen)
Bedienbar:
• Sämtliche Inhalte und
  Funktionen müssen per
  Tastatur erreich- und
  bedienbar sein
• Bewegungen und
  Aktualisierungen müssen
  vom Benutzer gesteuert
  werden können
• Hilfen zur Orientierung
 und Navigation
Bedienbar:
»Skip-Links«
erleichtern die
Bedienung für
Tastaturnutzer.
http://www.flickr.com/photos/53407766@N00/55806664
Exzessibility!
Verständlich:
Verständlich?
» We can make a Web site work
 with zero hearing.
 We can make one work with
 zero vision.
 We can even make a Web site work
 with almost zero movement.
 But we can’t make a Web site work
 with zero cognition.« Joe Clark, atmedia 2007
– =+
 ( weniger ist mehr )
Innovatives
Optimierungswerkzeug
für kalorienreduzierten
     Web-Content:

 <!-­‐-­‐    -­‐-­‐>
Robust:
Robust?
Robust?
KTHXBAI!
<a  href="mailto:tomas@tomascaspers.de">Noch Fragen?</a>
<a  href="http://creativecommons.org/licenses/by-­‐nc-­‐sa/2.0/de/"  
rel="license">Attribution-Noncommercial-Share Alike 2.0</a>

Weitere ähnliche Inhalte

Ähnlich wie Deutsche Übersetzung der WCAG 2.0

design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
Jens Grochtdreis
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
Jürg Stuker
 
Accessibility Evaluation praxisnah
Accessibility Evaluation praxisnahAccessibility Evaluation praxisnah
Accessibility Evaluation praxisnah
Sven Jenzer
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
Luka Peters
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
halfman.halfpixel
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)
Stefan Freimark
 
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
Peter Rozek
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
Bernd Burkert
 
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
mbar196
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Francesco Schwarz
 
Barrierefreie Internet Seiten
Barrierefreie Internet SeitenBarrierefreie Internet Seiten
Barrierefreie Internet Seiten
Wolfgang Wiese
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
uxHH
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
ETH-Bibliothek
 
Mehr Softwarequalität: Usability
Mehr Softwarequalität: UsabilityMehr Softwarequalität: Usability
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Wolfram Nagel
 
Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!
Martina Goehring
 

Ähnlich wie Deutsche Übersetzung der WCAG 2.0 (20)

design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
 
Accessibility Evaluation praxisnah
Accessibility Evaluation praxisnahAccessibility Evaluation praxisnah
Accessibility Evaluation praxisnah
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)
 
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
 
WCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der DingeWCM im Jahr 2013 und danach - der Stand der Dinge
WCM im Jahr 2013 und danach - der Stand der Dinge
 
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
Einblick in die Barrierefreiheit am Beispiel der BAD - Before and After Demon...
 
Barrierefrei
BarrierefreiBarrierefrei
Barrierefrei
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Barrierefreie Internet Seiten
Barrierefreie Internet SeitenBarrierefreie Internet Seiten
Barrierefreie Internet Seiten
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015Workshop Responsive Webdesign 2015
Workshop Responsive Webdesign 2015
 
Barrierefreiheit
BarrierefreiheitBarrierefreiheit
Barrierefreiheit
 
Mehr Softwarequalität: Usability
Mehr Softwarequalität: UsabilityMehr Softwarequalität: Usability
Mehr Softwarequalität: Usability
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!
 

Mehr von Tomas Caspers

How to Sneak Accessibility into Your Project Without Anybody Noticing It.
How to Sneak Accessibility into Your Project Without Anybody Noticing It.How to Sneak Accessibility into Your Project Without Anybody Noticing It.
How to Sneak Accessibility into Your Project Without Anybody Noticing It.
Tomas Caspers
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Tomas Caspers
 
A-Tag 2010
A-Tag 2010A-Tag 2010
A-Tag 2010
Tomas Caspers
 
Relaunch von wien.at - Webtech Mainz 2010
Relaunch von wien.at - Webtech Mainz 2010Relaunch von wien.at - Webtech Mainz 2010
Relaunch von wien.at - Webtech Mainz 2010
Tomas Caspers
 
A-Tag '09
A-Tag '09A-Tag '09
A-Tag '09
Tomas Caspers
 
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sindWCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
Tomas Caspers
 
Gute Seiten, Schlechte Seiten
Gute Seiten, Schlechte SeitenGute Seiten, Schlechte Seiten
Gute Seiten, Schlechte Seiten
Tomas Caspers
 
Barrierefreiheit anno 2008
Barrierefreiheit anno 2008Barrierefreiheit anno 2008
Barrierefreiheit anno 2008
Tomas Caspers
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
Tomas Caspers
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der Praxis
Tomas Caspers
 

Mehr von Tomas Caspers (10)

How to Sneak Accessibility into Your Project Without Anybody Noticing It.
How to Sneak Accessibility into Your Project Without Anybody Noticing It.How to Sneak Accessibility into Your Project Without Anybody Noticing It.
How to Sneak Accessibility into Your Project Without Anybody Noticing It.
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
A-Tag 2010
A-Tag 2010A-Tag 2010
A-Tag 2010
 
Relaunch von wien.at - Webtech Mainz 2010
Relaunch von wien.at - Webtech Mainz 2010Relaunch von wien.at - Webtech Mainz 2010
Relaunch von wien.at - Webtech Mainz 2010
 
A-Tag '09
A-Tag '09A-Tag '09
A-Tag '09
 
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sindWCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
WCAG 2.0, oder warum alle Kühe in der Schweiz braun sind
 
Gute Seiten, Schlechte Seiten
Gute Seiten, Schlechte SeitenGute Seiten, Schlechte Seiten
Gute Seiten, Schlechte Seiten
 
Barrierefreiheit anno 2008
Barrierefreiheit anno 2008Barrierefreiheit anno 2008
Barrierefreiheit anno 2008
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & Barrierefreiheit
 
Das Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der PraxisDas Web zum Mitmachen: Barrieren in der Praxis
Das Web zum Mitmachen: Barrieren in der Praxis
 

Deutsche Übersetzung der WCAG 2.0