BOA-Symposium 2007, Düsseldorf

1. Flash, Ajax&
Barrierefreiheit

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).

4. http://www.patramsey.net/2007/the-accessible-web/

8. 1997

9. 1997

10. 1997
http://www.w3.org/Style/CSS/Test/w3c.html

11. ?
Web-Standards
Ja, nee, is klar!

13. Die Folgen:
div.content {
width:400px;
voice-family: quot;quot;}quot;quot;;
voice-family:inherit;
width:300px;
}
html>body .content {
width:300px;
}
(ekelig, oder?)

14. 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;>

15. 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;>

16. 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;>

17. 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;>

18. Barrierefreiheit?
© http://www.flickr.com/photos/webseeings/239301576/

20. WTF?

21. WCAG2.0?

22. WCAG2.0?
10 PRINT quot;WCAGquot;
20 GOTO 10

24. Checklisten-
Syndrom?

25. © http://www.flickr.com/photos/chuckbiscuito/161971512/
Real World User Testing

26. © http://www.flickr.com/photos/kosmar/323809582/

27. Applikation
!=
Dokument

29. ?
Web-Standards
Besserung in Sicht?

30. ?
Sonderlösung

31. Der Praxisteil:
• Flash- &
AJAX-Mythen

32. Der Praxisteil:
• Flash- &
AJAX-Mythen
(Standardistus argumentatavum Maximus)

33. Der Praxisteil:
?
• Flash & AJAX ist:
nix für Suchmaschinen

35. Der Praxisteil:
?
• Flash ist:
kein Open Source

37. Der Praxisteil:
?
• Flash ist:
nicht barrierefrei

39. Der Praxisteil:
?
• Flash & AJAX ist:
nix für Screenreader

40. http://de.wikipedia.org/wiki/OpenLaszlo

41. Der Praxisteil:
?
• Flash ist:
nix für Sehbehinderte

42. Der Praxisteil:
!
http://www.kaourantin.net/swf/highContrast.html
http://niquimerret.com/fontresize/
Psst: System.capabilities.hasAccessibility:true

43. Der Praxisteil:
?
• Flash ist:
Schuld an ...

45. Der Praxisteil:
?
• Flash und AJAX:
können keine
Bookmarks

46. http://www.flickr.com/photos/53407766@N00/55806664

47. Der Praxisteil:
?
• Flash & AJAX sind:
abgeschaltet

48. 79%
aller Statistiken
sind gefälscht!
(diese eingerechnet)

49. Der Praxisteil:
?
• Flash & AJAX sind:
viel Arbeit, wenn
man es zugänglich
machen will

50. Der Praxisteil:
!
• Stimmt.

51. 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/

52. Die Prinzipien:
POUR

53. Die Prinzipien:
POURN

54. Die Prinzipien:
POURN

55. Die Prinzipien:
POUR

56. Ist die Zeit komplexer
Richtlinien, die alles
bis ins kleinste Detail
regeln wollen, vorbei?

57. =+
–( weniger ist mehr )

58. Danke für‘s Zuhören!
<a href=“mailto:tomas@tomascaspers.de“>Fragen?</a>

59. CC
<a href=“http://creativecommons.org/licenses/by-sa/2.0/de/
deed.de“ rel=“license“>Attribution-ShareAlike</a>

60. 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/