Präsentation am Wiener A-Tag `09 - Analyse der Tastaturbedienbarkeit des österreichischen Web 2.0 Startup yasssu.com. Download ist möglich, aber die PDF-Datei ist nicht barrierefrei und natürlich ohne Screencasts. Präsentation mit Screencasts auf sprungmarker.de (http://url.ie/2tpc)

1. Der A-TAG ´09 präsentiert
00:01 Also sprach Zarathustra: ein Web für Alle oder Keinen

2. 03:30 Am Anfang war die Tastatur und der Walzer

3. 03:48 eine sprungmarker Produktion

4. 2009: Eine Tastatur-Odyssee
03:99 am Beispiel von yasssu.com

5. 04:10 yasssu.com – media for you

6.  Podcastservice (Audio,
Video)
 Prinzip Select-Drag-Drop
 my yasssu
 abrufbar via Web, Mobile
und Telefon (kein Scherz ;))
 Upload-Funktion
 Premium-Möglichkeit
04:15 Podcast, Video, Personalisierung, Upload, Mobile

7. Teil I: Die Werkzeuge
17:52 gut, wir könnten auch nur tabben

8. LogFocus
18:15 Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an

9. LogFocus
18:25 Bookmarklet – Konsole Firebug – schnelles Debuggen

10. LogFocus
Vorteile
 einfache Handhabung
 Historie
 browserunabhängig (konsolen-abhängig)
Nachteile
 nur für fokussierbare Elemente wie Links, Formulare
 Fokus auf der Webseite ändert sich nicht
18:35 Dirk Ginader http://url.ie/2mg3

11. Focus Inspector
18:45 Teil der Firefox Accessibility Extension – Add-on für Firefox

12. Focus Inspector
18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox

13. Focus Inspector
19:05 Beim Tabben wird das aktuell fokussierte Element hervorgehoben

14. Focus Inspector
Vorteile
 einfache Handhabung
 effektiv und gut sichtbarer Fokus
 Farbprüfung, Linkcodierung einsehbar
Nachteile
 etwas ladeintensiv
 Probleme mit absoluten Positionierungen
(Fokus verlässt sichtbaren Bereich)
19:15 http://addons.mozilla.org/en-US/firefox/addon/5809

15. Mouseless Browsing
19:20 Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch

16. Mouseless Browsing
19:25 Add-on für Firefox - Einstellungen IDs

17. Mouseless Browsing
19:30 Add-on für Firefox - Einstellungen – Fokussierbare Elemente

18. Mouseless Browsing
19:35 Add-on für Firefox - Einstellungen – Tastaturkürzel

19. Mouseless Browsing
19:40 Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente

20. Mouseless Browsing
Vorteile
 einfache Handhabung
 macht fast alle fokussierbaren Elemente ansteuerbar
 auch Flash, DIV
 umfangreiche Konfiguration
Nachteile
 festen Fokus belegen Formulare und Flash (mit CTRL + ID verlassbar)
 Fokus auf der Webseite oft nicht besser, Layout wird beeinflusst
 nicht alle Elemente werden erfasst (Leere Links, Bilder mit onclick)
19:45 http://addons.mozilla.org/en-US/firefox/addon/879

21. Teil II: Tabo Magnetischer Alltag (TMA)
19:50 Ganz viel an der schönen blauen Donau und Johann Strauss

22. Erreichbarkeit
31:10 und viel zu viele weiße Flecken

23. Startseite und Vorauswahl
31:20 Flash mit Weiterleitung

24. 48:10 0%: Navigation, Flash

25. 47:00 Startseite mit Weiterleitung auf die Übersichtsseite

26. Nicht erreichbare DIVs
 Aufklappmenü auf onclick
 aber: nicht mit der Tastatur erreichbar
48:30 Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten

27. Nicht erreichbare DIVs
48:35 150% Code-Krampf  führt zu Minus-Erreichbarkeit

28. Lösung
 Semantik
 standardkonforme Hauptnavigation (Listen)
 echte Links einsetzen
 Add-on: Aufklappmechanismus barrierefrei
 1. Ebene muss erreichbar sein
 nicht das Rad neu erfinden
 auf ein Standard-Javascript-Framework zurückgreifen
 Beispiel: jQuery – Basiseffekt toggle( ) ist tastaturbedienbar
48:40 http://docs.jquery.com/Effects/toggle

29. Detailseite Podcast
48:50 Player, Auswahl für my yasssu – Hier spielt sich alles ab

30. 48:50 0%: Navigation, Player, Tabs, Sendungswechsel, Optionen

31. 49:00 Podcast-Detailseite mit Player und Auswahl der Sendungen

32. 49:30 Screencast: Tastaturbedienung Detailseite

33. Nicht erreichbarer Player
 nicht mal im Internet
Explorer erreichbar
wmode = transparent
 min. Möglichkeiten
 Autostart
 Nur Play + Pause
 keine Untertitelung
 Video: keine Audio-
Beschreibung
49:45 Der Kern von yasssu: Audio- und Videos in diesem Player

34. Lösung I – JW Player
 Standards nutzen!
 viele Optionen
 per Tastatur
zugänglich
 Untertitelung CC
(Timed Text)
 AD: Audio-
description
 Playlist
Screenshot: http://www.longtailvideo.com/support/jw-player-setup-wizard
49:55 Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung

35. Lösung II – Flowplayer
 viele Optionen
 per Tastatur bedingt
zugänglich
 Untertitelung CC
(Timed Text, SubRib,
FLV cuepoints)
 Audiobeschreibung via
Audio Plugin
 Playlist
Screenshot: http://flowplayer.org/plugins/flash/captions.html
A more accessible Flowplayer: setzt auf dem Plugin Controlbar auf
50:00 Untertitelung CC als Plugin, nicht immer tastaturbedienbar

36. Lösung – JW Player
50:00 Quelle: MALT Wiki Techshare 2009 - Slideshare

37. my yasssu
50:10 Podcast Karussell, Uploads, Sortierung yasssuCALL

38. 50:25 my yasssu

39. 50:30 my yasssu – hier wird es interaktiv

40. 50:40 Screencast: Tastaturbedienung my yasssu

41. ! Grafiken auf onclick !
Flash-Karussell
 Semantik! ! wmode = transparent !
 richtige Buttons
50:45 Selbst Mouseless Browsing muss da passen ...

42. 58:28 my yasssu – Upload-Layer

43. 58:30 my yasssu – Upload-Layer

44. Lost Layers
 Layer erhalten nicht den Fokus
 Alles wieder und wieder
durchtabben
 Layer schließt sich ungewollt
 Standards nutzen
 Beispiel Layerskripte von jQuery
 auf Tastaturbedienbarkeit testen
58:45 Viele Interaktionen werden mit Hilfe von Layern realisiert

45. jmpopups – tastaturbedienbar ... aber
Screenshot: http://otavioavila.com/jmpopups-example/
1:08:53 Fokus immer im ersten fokussierbaren Element

46. 1:09:20 Screencast: jmpopups

47. 
 Nicht mit einem Screenreader lesbar weil: display: none;
 Aber es funktioniert mit:
 visibility: hidden
 aus dem sichtbaren Bereich schieben
1:09:45 also weitersuchen 

48. YUI – Dialog Quickstart Example
Screenshot: http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html
1:19:53 tastaturbedienbar und mit Screenreader nutzbar

49. 1:20:10 Screencast: YUI – Dialog Quickstart Example

50. Auswahlseite: Drag & Drop
1:51:00 yasssu Maxime: Select – Drag - Drop

51. Screencast: Drag & Drop yasssu.com
1:52

52. Drag & Drop tastaturbedienbar
1:51:00 Opera: Accessible drag and drop using WAI-ARIA

53.  arbeitet mit WAI-ARIA
 aria-grabbed
 aria-dropeffect
 Javascript
 Tabben, Leertaste und
Pfeiltasten zur Auswahl
1:52:10 Screencast: http://devfiles.myopera.com/articles/735/example.html

54. Teil III: Mission Tabbius beendet
1:52:10 Die Tastatur und über die Tastatur hinaus ...

55. 2:03:34 Jetzt könnten noch viele andere Vorträge beginnen ...

56. 2:04:10 Ein wenig psychedelisch muss es schon werden ...

57. 2:11:20 ... am Schluss – macht Kubrick ja auch nicht anders

58. 2:20:28 für mehr Barrierefreiheit

59. von
Sylvia Egger
sprungmarker.de
Senior Webproducerin
Brainbits GmbH in Köln
Mit Dank an
yasssu.com
Stanley Kubrick für seinen Film 2001: Odyssee im Weltraum
Dank an Patrick Lauke für seinen Vortrag Keyboard accessibility
2:25:00 und nun die blaue Donau von Johann Strauss

60. Credits
FreePixels.com (Tastaturbilder)
Johann und Richard Strauss
Györgi Ligeti
MALT Wiki Techshare 2009 – Nick Freerar
http://www.slideshare.net/nfreear/malt-wiki-techshare2009
A more accessible Flowplayer
http://www.regione.emilia-romagna.it/sin_info/LineeGuida/examples/flowplayer/
Screencasts erstellt mit ScreenFlow
Soundtrack zur Präsentation bei lastfm:
http://www.lastfm.de/music/Soundtrack/2001+-+A+Space+Odyssey
2:28:51 folgen Sie mir doch auf twitter: @sprungmarkers