Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flash, Ajax & Barrierefreiheit

1,515 views

Published on

BOA-Symposium 2007, Düsseldorf

Published in: Technology
  • Be the first to comment

Flash, Ajax & Barrierefreiheit

  1. 1. Flash, Ajax& Barrierefreiheit
  2. 2. 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).
  3. 3. http://www.patramsey.net/2007/the-accessible-web/
  4. 4. 1997
  5. 5. 1997
  6. 6. 1997 http://www.w3.org/Style/CSS/Test/w3c.html
  7. 7. ? Web-Standards Ja, nee, is klar!
  8. 8. Die Folgen: div.content { width:400px; voice-family: quot;quot;}quot;quot;; voice-family:inherit; width:300px; } html>body .content { width:300px; } (ekelig, oder?)
  9. 9. 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;>
  10. 10. 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;>
  11. 11. 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;>
  12. 12. 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;>
  13. 13. Barrierefreiheit? © http://www.flickr.com/photos/webseeings/239301576/
  14. 14. WTF?
  15. 15. WCAG2.0?
  16. 16. WCAG2.0? 10
PRINT
quot;WCAGquot; 20
GOTO
10
  17. 17. Checklisten- Syndrom?
  18. 18. © http://www.flickr.com/photos/chuckbiscuito/161971512/ Real World User Testing
  19. 19. © http://www.flickr.com/photos/kosmar/323809582/
  20. 20. Applikation != Dokument
  21. 21. ? Web-Standards Besserung in Sicht?
  22. 22. ? Sonderlösung
  23. 23. Der Praxisteil: • Flash- & AJAX-Mythen
  24. 24. Der Praxisteil: • Flash- & AJAX-Mythen (Standardistus argumentatavum Maximus)
  25. 25. Der Praxisteil: ? • Flash & AJAX ist: nix für Suchmaschinen
  26. 26. Der Praxisteil: ? • Flash ist: kein Open Source
  27. 27. Der Praxisteil: ? • Flash ist: nicht barrierefrei
  28. 28. Der Praxisteil: ? • Flash & AJAX ist: nix für Screenreader
  29. 29. http://de.wikipedia.org/wiki/OpenLaszlo
  30. 30. Der Praxisteil: ? • Flash ist: nix für Sehbehinderte
  31. 31. Der Praxisteil: ! http://www.kaourantin.net/swf/highContrast.html http://niquimerret.com/fontresize/ Psst: System.capabilities.hasAccessibility:true
  32. 32. Der Praxisteil: ? • Flash ist: Schuld an ...
  33. 33. Der Praxisteil: ? • Flash und AJAX: können keine Bookmarks
  34. 34. http://www.flickr.com/photos/53407766@N00/55806664
  35. 35. Der Praxisteil: ? • Flash & AJAX sind: abgeschaltet
  36. 36. 79% aller Statistiken sind gefälscht! (diese eingerechnet)
  37. 37. Der Praxisteil: ? • Flash & AJAX sind: viel Arbeit, wenn man es zugänglich machen will
  38. 38. Der Praxisteil: ! • Stimmt.
  39. 39. Die Prinzipien: (der WCAG 2) Content must be perceivable 1. Interface elements in the content must be operable 2. Content and controls must be understandable 3. Content must be robust enough to work with current 4. and future Web technologies * http://www.w3.org/TR/WCAG20/
  40. 40. Die Prinzipien: POUR
  41. 41. Die Prinzipien: POURN
  42. 42. Die Prinzipien: POURN
  43. 43. Die Prinzipien: POUR
  44. 44. Ist die Zeit komplexer Richtlinien, die alles bis ins kleinste Detail regeln wollen, vorbei?
  45. 45. =+ –( weniger ist mehr )
  46. 46. Danke für‘s Zuhören! <a href=“mailto:tomas@tomascaspers.de“>Fragen?</a>
  47. 47. CC <a href=“http://creativecommons.org/licenses/by-sa/2.0/de/ deed.de“ rel=“license“>Attribution-ShareAlike</a>
  48. 48. 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/

×