Die Präsentation behandelt die Zugänglichkeit von Webanwendungen und -diensten, insbesondere in Bezug auf die Tastaturbedienung und Standards für Barrierefreiheit. Es werden verschiedene Werkzeuge und Add-ons für Browser vorgestellt, die die Interaktion mit Webseiten erleichtern sollen, sowie Lösungen zur Verbesserung der Benutzererfahrung auf der Plattform yasssu.com. Der Fokus liegt auf der Notwendigkeit, Standards zu verwenden und die Navigation für alle Benutzer zugänglich zu machen.

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