SlideShare uma empresa Scribd logo
1 de 57
Baixar para ler offline
Das Web zum Mitmachen:
Barrieren in der Praxis
Tomas Caspers
berÀt Industrie, NGOs und
Behörden, baut Websites,
schreibt BĂŒcher darĂŒber
und hÀlt VortrÀge


(und mag Akzidenz-Grotesk viel lieber als Helvetica).
http://www.patramsey.net/2007/the-accessible-web/
Party
like it's
            ?
1999
Frames!
  Farbige Scrollbalken!
  AufklappmenĂŒs! Animierte
                  Schneeflocken!
Ticker! SeitenĂŒbergĂ€nge!
 Die aktuelle Uhrzeit!
        Browser-Chrome verstecken!
Hintergrundmusik!
          Countdown bis
 Pop-Ups!  Weihnachten!
<A onMouseOver=quot;window.status='hier
      klicken!'; return true;quot;>
Frames!
  Farbige Scrollbalken!
  AufklappmenĂŒs! Animierte
                  Schneeflocken!
Ticker! SeitenĂŒbergĂ€nge!

BÖSE!
 Die aktuelle Uhrzeit!
        Browser-Chrome verstecken!
Hintergrundmusik!
          Countdown bis
 Pop-Ups!  Weihnachten!
<A onMouseOver=quot;window.status='hier
      klicken!'; return true;quot;>
Frames!
  Farbige Scrollbalken!
  AufklappmenĂŒs! Animierte
                  Schneeflocken!
Ticker! SeitenĂŒbergĂ€nge!
 Die aktuelle Uhrzeit!
        Browser-Chrome verstecken!
Hintergrundmusik!
          Countdown bis
 Pop-Ups!  Weihnachten!
<A onMouseOver=quot;window.status='hier
      klicken!'; return true;quot;>
Frames!
  Farbige Scrollbalken!



    NOCH
  AufklappmenĂŒs! Animierte
                  Schneeflocken!
Ticker! SeitenĂŒbergĂ€nge!
 Die aktuelle Uhrzeit!
  IMMER Browser-Chrome verstecken!
Hintergrundmusik!
                          Countdown bis
 Pop-Ups!
   BÖSE!                   Weihnachten!
<A onMouseOver=quot;window.status='hier
      klicken!'; return true;quot;>
Checklisten-
  Syndrom?
WCAG2.0?

10 PRINT quot;WCAGquot;
20 GOTO 10
Der Praxisteil:
‱ Flash- &
  AJAX-Mythen
Der Praxisteil:
‱ Flash- &
  AJAX-Mythen


(Standardistus argumentatavum Maximus)
Mythos №1



               ?
‱ Flash & AJAX sind:
  nix fĂŒr Suchmaschinen
Mythos №2



                  ?
‱ Flash ist:
  nicht barrierefrei
http://flexapps.macromedia.com/flex15/blogreader/blogreader.mxml?accessible=true
Mythos №3



                ?
‱ Flash & AJAX sind:
  nix fĂŒr Screenreader
http://de.wikipedia.org/wiki/OpenLaszlo
Mythos №4



                ?
‱ Flash ist:
  nix fĂŒr Sehbehinderte
Der Praxisteil:



                                             !
http://www.kaourantin.net/swf/highContrast.html
http://niquimerret.com/fontresize/



Psst: System.capabilities.hasAccessibility:true
Mythos №5



                ?
‱ Flash & AJAX sind:
  Schuld an ...
http://www.flickr.com/photos/53407766@N00/55806664
Mythos №6



                ?
‱ Flash & AJAX sind:
  abgeschaltet
79%
aller Statistiken
sind gefÀlscht!
  (diese eingerechnet)
Mythos №7



                ?
‱ Flash & AJAX sind:
  viel Arbeit,
  wenn man es
  barrierefrei
  machen will
Mythos №7



            !
‱ Stimmt.
Der Praxisteil:
(endlich)
© http://www.flickr.com/photos/chuckbiscuito/161971512/




Real World User Testing
© http://www.ïŹ‚ickr.com/photos/kosmar/323809582/
Applikation

  !=
Dokument
Die 4 Prinzipien:

POUR
Die 4 Prinzipien:
(der WCAG 2)*

1. Wahrnehmbar

2. Bedienbar

3. VerstÀndlich

4. Technisch robust

                      * http://www.w3.org/TR/WCAG20/
Wahrnehmbar?
?
Bedienbar?
Bedienbar?

1. oder
1. oder
1. oder?
© http://www.frequency-decoder.com/demo/date-picker-v2/
VerstÀndlich?
=+
–( weniger ist mehr )
Robust?
Danke fĂŒr‘s Zuhören!
<a href=“mailto:tomas@tomascaspers.de“>Fragen?</a>
CC
<a href=“http://creativecommons.org/licenses/by-sa/2.0/de/
      deed.de“ rel=“license“>Attribution-ShareAlike</a>
URLs:
ZugÀngliches Flash:

http://www.kaourantin.net/swf/highContrast.html
http://niquimerret.com/fontresize/
http://www.bbc.co.uk/accessibility/bbc/mainnews.shtml
http://www.bbc.co.uk/cbeebies/grownups/special_needs/physical_dev/switch/
http://www.bbc.co.uk/cbbc/games/switch/
http://usabletype.com/weblog/flexing-your-apps/
http://www.webaim.org/techniques/flash/
http://www.jkrowling.com/

ZugÀngliches AJAX:

http://developer.mozilla.org/en/docs/AJAX:WAI_ARIA_Live_Regions
http://developer.mozilla.org/en/docs/ARIA_to_API_mapping
http://www.sitepoint.com/blogs/2007/04/30/javascript-and-screen-readers/
http://accessibleajax.clcworld.net/
http://www.frequency-decoder.com/2006/10/02/unobtrusive-date-picker-widgit-update/

Testwerkzeuge:

„Active Accessibility 2.0 SDK Tools“ - http://www.microsoft.com/downloads/details.aspx...
„Accerciser“ - http://live.gnome.org/Accerciser

Mais conteĂșdo relacionado

Destaque

Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008
esf3
 
Zinc and zinc nickel plating
Zinc and zinc nickel platingZinc and zinc nickel plating
Zinc and zinc nickel plating
camzurv
 
Minéraux
MinérauxMinéraux
Minéraux
ioarmg
 
Nouveau microsoft word document
Nouveau microsoft word documentNouveau microsoft word document
Nouveau microsoft word document
karimfpk
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bd
Camille Volant
 
TRANSITION METALS
TRANSITION METALSTRANSITION METALS
TRANSITION METALS
Drix78
 

Destaque (20)

TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha TWT Trendradar: Project Naptha
TWT Trendradar: Project Naptha
 
Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008Les vaccinations rappel calendrier vaccinal 2008
Les vaccinations rappel calendrier vaccinal 2008
 
TripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case TecnocromTripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
TripleHard - Trivalent Based Hard Chrome - Case Tecnocrom
 
Zinc and zinc nickel plating
Zinc and zinc nickel platingZinc and zinc nickel plating
Zinc and zinc nickel plating
 
Minéraux
MinérauxMinéraux
Minéraux
 
DĂ©veloppez des applications natives en HTML/JS avec Chrome apps
DĂ©veloppez des applications natives en HTML/JS avec Chrome appsDĂ©veloppez des applications natives en HTML/JS avec Chrome apps
DĂ©veloppez des applications natives en HTML/JS avec Chrome apps
 
Nouveau microsoft word document
Nouveau microsoft word documentNouveau microsoft word document
Nouveau microsoft word document
 
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
40 cfr 261.4(b)(6) The RCRA Exclusion From Hazardous Waste for Trivalent Chro...
 
Removal of chromium
Removal of chromiumRemoval of chromium
Removal of chromium
 
Chapter 5
Chapter 5Chapter 5
Chapter 5
 
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESSA SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
A SHORT REVIEW ON ALUMINIUM ANODIZING: AN ECO-FRIENDLY METAL FINISHING PROCESS
 
Brochure Meca-19102016-bd
Brochure Meca-19102016-bdBrochure Meca-19102016-bd
Brochure Meca-19102016-bd
 
Protection des métaux contre la corrosion
Protection des métaux contre la corrosionProtection des métaux contre la corrosion
Protection des métaux contre la corrosion
 
TRANSITION METALS
TRANSITION METALSTRANSITION METALS
TRANSITION METALS
 
TALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of AluminiumTALAT Lecture 5203: Anodizing of Aluminium
TALAT Lecture 5203: Anodizing of Aluminium
 
HTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich istHTML5 und CSS3 - was jetzt schon möglich ist
HTML5 und CSS3 - was jetzt schon möglich ist
 
Warum die Recruiting QualitÀt einzelner alle Recruiter betrifft!
Warum die Recruiting QualitÀt einzelner alle Recruiter betrifft!Warum die Recruiting QualitÀt einzelner alle Recruiter betrifft!
Warum die Recruiting QualitÀt einzelner alle Recruiter betrifft!
 
Leseranalyse EntscheidungstrÀger 2014
Leseranalyse EntscheidungstrÀger 2014Leseranalyse EntscheidungstrÀger 2014
Leseranalyse EntscheidungstrÀger 2014
 
Media Analyse 2013
Media Analyse 2013Media Analyse 2013
Media Analyse 2013
 
FibroviaŸ - La fibre de la longévité
FibroviaŸ - La fibre de la longévitéFibroviaŸ - La fibre de la longévité
FibroviaŸ - La fibre de la longévité
 

Semelhante a Das Web zum Mitmachen: Barrieren in der Praxis

Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
Fabian Lange
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
JanGroenefeld
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
Jens Grochtdreis
 

Semelhante a Das Web zum Mitmachen: Barrieren in der Praxis (20)

Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Was nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference EditionWas nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference Edition
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Web Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 TalkWeb Performance Optimization - JAX 2011 Talk
Web Performance Optimization - JAX 2011 Talk
 
Online Social Graph Consolidation
Online Social Graph ConsolidationOnline Social Graph Consolidation
Online Social Graph Consolidation
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Aber schnell! Top HTML5 Performance Tipps fĂŒr Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps fĂŒr Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps fĂŒr Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps fĂŒr Hybrid- und Web-Apps
 
Smart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web ContextSmart Clients - Interaction Paradigms in Web Context
Smart Clients - Interaction Paradigms in Web Context
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
JavaScript Days 2015: Security
JavaScript Days 2015: SecurityJavaScript Days 2015: Security
JavaScript Days 2015: Security
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
 

Mais de Tomas Caspers (9)

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.
 
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
 
WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009WCAG 2.0-Vortrag Webtech 2009
WCAG 2.0-Vortrag Webtech 2009
 
A-Tag '09
A-Tag '09A-Tag '09
A-Tag '09
 
Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0Deutsche Übersetzung der WCAG 2.0
Deutsche Übersetzung der WCAG 2.0
 
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
 

Das Web zum Mitmachen: Barrieren in der Praxis