PDF -Datei (2,2 MB ) herunterladen
Transcrição
PDF -Datei (2,2 MB ) herunterladen
Flash, Ajax& Barrierefreiheit 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/ 1997 1997 1997 http://www.w3.org/Style/CSS/Test/w3c.html ? Web-Standards Ja, nee, is klar! Die Folgen: div.content { width:400px; voice-family: "\"}\""; voice-family:inherit; width:300px; } html>body .content { width:300px; } (ekelig, oder?) Farbige Scrollbalken! Frames! Aufklappmenüs! Animierte Schneeflocken! Ticker! Seitenübergänge! Die aktuelle Uhrzeit! Browser-Chrome verstecken! Hintergrundmusik! Countdown bis Weihnachten! Pop-Ups! <A onMouseOver="window.status='hier klicken!'; return true;"> Farbige Scrollbalken! Frames! Aufklappmenüs! Animierte Schneeflocken! Ticker! Seitenübergänge! Die aktuelle Uhrzeit! BÖSE! Browser-Chrome verstecken! Hintergrundmusik! Countdown bis Weihnachten! Pop-Ups! <A onMouseOver="window.status='hier klicken!'; return true;"> Farbige Scrollbalken! Frames! Aufklappmenüs! Animierte Schneeflocken! Ticker! Seitenübergänge! Die aktuelle Uhrzeit! Browser-Chrome verstecken! Hintergrundmusik! Countdown bis Weihnachten! Pop-Ups! <A onMouseOver="window.status='hier klicken!'; return true;"> Farbige Scrollbalken! Frames! NOCH IMMER Pop-Ups! BÖSE! Aufklappmenüs! Animierte Schneeflocken! Ticker! Seitenübergänge! Die aktuelle Uhrzeit! Browser-Chrome verstecken! Hintergrundmusik! Countdown bis Weihnachten! <A onMouseOver="window.status='hier klicken!'; return true;"> Barrierefreiheit? © http://www.flickr.com/photos/webseeings/239301576/ WTF? WCAG2.0? WCAG2.0? 10 PRINT "WCAG" 20 GOTO 10 ChecklistenSyndrom? © http://www.flickr.com/photos/chuckbiscuito/161971512/ Real World User Testing © http://www.flickr.com/photos/kosmar/323809582/ Applikation != Dokument ? Web-Standards Besserung in Sicht? ? Sonderlösung Der Praxisteil: • Flash- & AJAX-Mythen Der Praxisteil: • Flash- & AJAX-Mythen (Standardistus argumentatavum Maximus) Der Praxisteil: ? • Flash & AJAX ist: nix für Suchmaschinen Der Praxisteil: ? • Flash ist: kein Open Source Der Praxisteil: ? • Flash ist: nicht barrierefrei Der Praxisteil: ? • Flash & AJAX ist: nix für Screenreader http://de.wikipedia.org/wiki/OpenLaszlo Der Praxisteil: ? • Flash ist: nix für Sehbehinderte Der Praxisteil: ! http://www.kaourantin.net/swf/highContrast.html http://niquimerret.com/fontresize/ Psst: System.capabilities.hasAccessibility:true Der Praxisteil: • Flash ist: Schuld an ... ? Der Praxisteil: ? • Flash und AJAX: können keine Bookmarks http://www.flickr.com/photos/53407766@N00/55806664 Der Praxisteil: ? • Flash & AJAX sind: abgeschaltet 79% aller Statistiken sind gefälscht! (diese eingerechnet) Der Praxisteil: ? • Flash & AJAX sind: viel Arbeit, wenn man es zugänglich machen will Der Praxisteil: • Stimmt. ! Die Prinzipien: (der WCAG 2) 1. Content must be perceivable 2. Interface elements in the content must be operable 3. Content and controls must be understandable 4. Content must be robust enough to work with current and future Web technologies * http://www.w3.org/TR/WCAG20/ Die Prinzipien: POUR Die Prinzipien: POURN Die Prinzipien: POURN Die Prinzipien: POUR Ist die Zeit komplexer Richtlinien, die alles bis ins kleinste Detail regeln wollen, vorbei? = + – ( weniger ist mehr ) Danke für‘s Zuhören! <a href=“mailto:[email protected]“>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: Kontrast: http://www.kaourantin.net/swf/highContrast.html Textskalierung: http://niquimerret.com/fontresize/ Best Practice: 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/ http://www.sitepoint.com/blogs/2007/04/30/javascript-and-screen-readers/ http://labs.adobe.com/technologies/air/