SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
WCAG 2.0
 EB RAUTS | Tomas Caspers
»Tomas Caspers
 berät Industrie, NGOs und
 Behörden, baut Websites,
 schreibt Bücher, bloggt
 und hält Vorträge. «
http://www.patramsey.net/2007/the-accessible-web/
Vorsicht, Rant!



flickr.com/photos/codepo8/4046654750/
http://www.wheelchairfoundation.org/
http://www.umich.edu/~webacces/SiteMap.html
schöne
Seiten




         barrierefreie
              Seiten
Barrierefreiheit?




           http://twitter.com/amendedestages/status/5322925867
• USA: Americans with Disabilities Act (ADA)
  • Section 508
• GB: Disability Discrimination Act (DDA)
• EU: Vorgaben für entsprechende Gesetze
  in den Mitgliedsländern
• Deutschland:
  • Artikel 3 Absatz 3 Satz 2 Grundgesetz
  • Behindertengleichstellungsgesetz (BGG)
  • Rechtsverordnung zur Barrierefreien
    Informationstechnik (BITV 1.0) ← WCAG 1.0!
  • 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.«
http://sean-tron.deviantart.com/art/mosh-109253636
http://twitpic.com/304js/full
Hä?
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
WCAG 1.0
  vs.
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/
»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".
WCAG AAA
   =
 Abhaken Als
Ersatz für echte
 Accessibility
   http://www.iheni.com/wcag-triple-a-accessibilty-as-an-afterthought/
Und nun?




           © http://www.flickr.com/photos/chuckbiscuito/161971512/
Jetzt auch auf Deutsch!




          http://www.w3.org/Translations/WCAG20-de/
O NOES!


     http://kqe.de/feminismus-13373955.html
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:
<img  
src="foo"  
alt="bar">
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 WCAG 2.0-Vortrag Webtech 2009

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...Sven Jenzer
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignLuka Peters
 
Barrierefreiheit auf wien.at
Barrierefreiheit auf wien.atBarrierefreiheit auf wien.at
Barrierefreiheit auf wien.atThomas Jöchler
 
Accessibility Evaluation praxisnah
Accessibility Evaluation praxisnahAccessibility Evaluation praxisnah
Accessibility Evaluation praxisnahSven Jenzer
 
Einführung in das Semantic Web
Einführung in das Semantic WebEinführung in das Semantic Web
Einführung in das Semantic WebJakob .
 
Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!Martina Goehring
 
Web2.0 - Innovativ kommunizieren
Web2.0 - Innovativ kommunizierenWeb2.0 - Innovativ kommunizieren
Web2.0 - Innovativ kommunizierendavidroethler
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenChristian Hauschke
 
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
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Jürg Stuker
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
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
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)Stefan Freimark
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Wolfram Nagel
 

Ähnlich wie WCAG 2.0-Vortrag Webtech 2009 (20)

Barrierefreiheit 2010
Barrierefreiheit 2010Barrierefreiheit 2010
Barrierefreiheit 2010
 
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...
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Barrierefreiheit auf wien.at
Barrierefreiheit auf wien.atBarrierefreiheit auf wien.at
Barrierefreiheit auf wien.at
 
Accessibility Evaluation praxisnah
Accessibility Evaluation praxisnahAccessibility Evaluation praxisnah
Accessibility Evaluation praxisnah
 
Einführung in das Semantic Web
Einführung in das Semantic WebEinführung in das Semantic Web
Einführung in das Semantic Web
 
Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!Social Software. Mitarbeiter 2.0!
Social Software. Mitarbeiter 2.0!
 
Web2.0 - Innovativ kommunizieren
Web2.0 - Innovativ kommunizierenWeb2.0 - Innovativ kommunizieren
Web2.0 - Innovativ kommunizieren
 
Web2.0 Wieselburg
Web2.0 WieselburgWeb2.0 Wieselburg
Web2.0 Wieselburg
 
Web 2.0 in und für Bibliotheken
Web 2.0 in und für BibliothekenWeb 2.0 in und für Bibliotheken
Web 2.0 in und für Bibliotheken
 
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...
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
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)
 
Barrierefrei
BarrierefreiBarrierefrei
Barrierefrei
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)
 
WCAG für WebDevs
WCAG für WebDevsWCAG für WebDevs
WCAG für WebDevs
 

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 WespenTomas 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 2010Tomas 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 sindTomas Caspers
 
Gute Seiten, Schlechte Seiten
Gute Seiten, Schlechte SeitenGute Seiten, Schlechte Seiten
Gute Seiten, Schlechte SeitenTomas Caspers
 
Barrierefreiheit anno 2008
Barrierefreiheit anno 2008Barrierefreiheit anno 2008
Barrierefreiheit anno 2008Tomas Caspers
 
Flash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitFlash, Ajax & Barrierefreiheit
Flash, Ajax & BarrierefreiheitTomas 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 PraxisTomas 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
 

WCAG 2.0-Vortrag Webtech 2009