Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

2009: eine Tastatur-Odyssee

2.283 Aufrufe

Veröffentlicht am

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)

Veröffentlicht in: Design, Technologie
  • Als Erste(r) kommentieren

2009: eine Tastatur-Odyssee

  1. 1. Also sprach Zarathustra: ein Web für Alle oder Keinen 00:00 Der A-TAG ´09 präsentiert
  2. 2. Am Anfang war die Tastatur und der Walzer 03:30
  3. 3. eine sprungmarker Produktion 03:48
  4. 4. am Beispiel von yasssu.com 03:99 2009: Eine Tastatur-Odyssee
  5. 5. yasssu.com – media for you 04:10
  6. 6. Podcast, Video, Personalisierung, Upload, Mobile 04:15 <ul><li>Podcastservice (Audio, </li></ul><ul><li>Video) </li></ul><ul><li>Prinzip Select-Drag-Drop </li></ul><ul><li>my yasssu </li></ul><ul><li>abrufbar via Web, Mobile </li></ul><ul><li>und Telefon (kein Scherz ;)) </li></ul><ul><li>Upload-Funktion </li></ul><ul><li>Premium-Möglichkeit </li></ul>
  7. 7. gut, wir könnten auch nur tabben 17:52 Teil I: Die Werkzeuge
  8. 8. Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an 18:15 LogFocus
  9. 9. 18:25 LogFocus Bookmarklet – Konsole Firebug – schnelles Debuggen
  10. 10. 18:35 LogFocus Dirk Ginader http://url.ie/2mg3 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>Historie </li></ul><ul><li>browserunabhängig (konsolen-abhängig) </li></ul><ul><li>Nachteile </li></ul><ul><li>nur für fokussierbare Elemente wie Links, Formulare </li></ul><ul><li>Fokus auf der Webseite ändert sich nicht </li></ul>
  11. 11. Teil der Firefox Accessibility Extension – Add-on für Firefox 18:45 Focus Inspector
  12. 12. 18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox Focus Inspector
  13. 13. 19:05 Focus Inspector Beim Tabben wird das aktuell fokussierte Element hervorgehoben
  14. 14. 19:15 Focus Inspector http://addons.mozilla.org/en-US/firefox/addon/5809 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>effektiv und gut sichtbarer Fokus </li></ul><ul><li>Farbprüfung, Linkcodierung einsehbar </li></ul><ul><li>Nachteile </li></ul><ul><li>etwas ladeintensiv </li></ul><ul><li>Probleme mit absoluten Positionierungen (Fokus verlässt sichtbaren Bereich) </li></ul>
  15. 15. Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch 19:20 Mouseless Browsing
  16. 16. 19:25 Mouseless Browsing Add-on für Firefox - Einstellungen IDs
  17. 17. 19:30 Mouseless Browsing Add-on für Firefox - Einstellungen – Fokussierbare Elemente
  18. 18. 19:35 Mouseless Browsing Add-on für Firefox - Einstellungen – Tastaturkürzel
  19. 19. 19:40 Mouseless Browsing Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente
  20. 20. 19:45 Mouseless Browsing http://addons.mozilla.org/en-US/firefox/addon/879 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>macht fast alle fokussierbaren Elemente ansteuerbar </li></ul><ul><li>auch Flash, DIV </li></ul><ul><li>umfangreiche Konfiguration </li></ul><ul><li>Nachteile </li></ul><ul><li>festen Fokus belegen Formulare und Flash (mit CTRL + ID verlassbar) </li></ul><ul><li>Fokus auf der Webseite oft nicht besser, Layout wird beeinflusst </li></ul><ul><li>nicht alle Elemente werden erfasst (Leere Links, Bilder mit onclick) </li></ul>
  21. 21. Ganz viel an der schönen blauen Donau und Johann Strauss 19:50 Teil II: Tabo Magnetischer Alltag (TMA)
  22. 22. und viel zu viele weiße Flecken 31:10 Erreichbarkeit
  23. 23. Flash mit Weiterleitung 31:20 Startseite und Vorauswahl
  24. 24. 0%: Navigation, Flash 48:10
  25. 25. Startseite mit Weiterleitung auf die Übersichtsseite 47:00
  26. 26. Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten 48:30 Nicht erreichbare DIVs <ul><li>Aufklappmenü auf onclick </li></ul><ul><li>aber : nicht mit der Tastatur erreichbar </li></ul>
  27. 27. 150% Code-Krampf  führt zu Minus -Erreichbarkeit 48:35 Nicht erreichbare DIVs
  28. 28. http://docs.jquery.com/Effects/toggle 48:40 Lösung <ul><li>Semantik </li></ul><ul><ul><li>standardkonforme Hauptnavigation (Listen) </li></ul></ul><ul><ul><li>echte Links einsetzen </li></ul></ul><ul><li>Add-on: Aufklappmechanismus barrierefrei </li></ul><ul><ul><li>1. Ebene muss erreichbar sein </li></ul></ul><ul><ul><li>nicht das Rad neu erfinden </li></ul></ul><ul><ul><li>auf ein Standard-Javascript-Framework zurückgreifen </li></ul></ul><ul><ul><li>Beispiel: jQuery – Basiseffekt toggle( ) ist tastaturbedienbar </li></ul></ul>
  29. 29. Player, Auswahl für my yasssu – Hier spielt sich alles ab 48:50 Detailseite Podcast
  30. 30. 0%: Navigation, Player, Tabs, Sendungswechsel, Optionen 48:50
  31. 31. Podcast-Detailseite mit Player und Auswahl der Sendungen 49:00
  32. 32. Screencast: Tastaturbedienung Detailseite 49:30
  33. 33. Der Kern von yasssu: Audio- und Videos in diesem Player 49:45 Nicht erreichbarer Player <ul><li>nicht mal im Internet </li></ul><ul><li>Explorer erreichbar wmode = transparent </li></ul><ul><li>min. Möglichkeiten </li></ul><ul><li>Autostart </li></ul><ul><li>Nur Play + Pause </li></ul><ul><li>keine Untertitelung </li></ul><ul><li>Video: keine Audio- Beschreibung </li></ul>
  34. 34. Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung 49:55 Lösung I – JW Player <ul><li>Standards nutzen! </li></ul><ul><li>viele Optionen </li></ul><ul><li>per Tastatur zugänglich </li></ul><ul><li>Untertitelung CC </li></ul><ul><li>(Timed Text) </li></ul><ul><li>AD: Audio- </li></ul><ul><li>description </li></ul><ul><li>Playlist </li></ul>Screenshot: http://www.longtailvideo.com/support/jw-player-setup-wizard
  35. 35. Untertitelung CC als Plugin, nicht immer tastaturbedienbar 50:00 Lösung II – Flowplayer <ul><li>viele Optionen </li></ul><ul><li>per Tastatur bedingt zugänglich </li></ul><ul><li>Untertitelung CC (Timed Text, SubRib, </li></ul><ul><li>FLV cuepoints) </li></ul><ul><li>Audiobeschreibung via Audio Plugin </li></ul><ul><li>Playlist </li></ul>Screenshot: http://flowplayer.org/plugins/flash/captions.html A more accessible Flowplayer: setzt auf dem Plugin Controlbar auf
  36. 36. Quelle: MALT Wiki Techshare 2009 - Slideshare 50:00 Lösung – JW Player
  37. 37. Podcast Karussell, Uploads, Sortierung yasssuCALL 50:10 my yasssu
  38. 38. my yasssu 50:25
  39. 39. my yasssu – hier wird es interaktiv 50:30
  40. 40. Screencast: Tastaturbedienung my yasssu 50:40
  41. 41. Selbst Mouseless Browsing muss da passen ... 50:45 Flash-Karussell ! wmode = transparent ! <ul><li>! Grafiken auf onclick ! </li></ul><ul><li>Semantik! </li></ul><ul><li>richtige Buttons </li></ul>
  42. 42. my yasssu – Upload-Layer 58:28
  43. 43. my yasssu – Upload-Layer 58:30
  44. 44. Viele Interaktionen werden mit Hilfe von Layern realisiert 58:45 <ul><li>Layer erhalten nicht den Fokus </li></ul><ul><li>Alles wieder und wieder </li></ul><ul><li>durchtabben </li></ul><ul><li>Layer schließt sich ungewollt </li></ul><ul><li>Standards nutzen </li></ul><ul><li>Beispiel Layerskripte von jQuery </li></ul><ul><li>auf Tastaturbedienbarkeit testen </li></ul>Lost Layers
  45. 45. Fokus immer im ersten fokussierbaren Element 1:08:53 jmpopups – tastaturbedienbar ... aber Screenshot: http://otavioavila.com/jmpopups-example/
  46. 46. Screencast: jmpopups 1:09:20
  47. 47. also weitersuchen   <ul><li>Nicht mit einem Screenreader lesbar weil: display: none; </li></ul><ul><li>Aber es funktioniert mit: </li></ul><ul><ul><li>visibility: hidden </li></ul></ul><ul><ul><li>aus dem sichtbaren Bereich schieben </li></ul></ul>1:09:45
  48. 48. tastaturbedienbar und mit Screenreader nutzbar YUI – Dialog Quickstart Example Screenshot: http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html 1:19:53
  49. 49. Screencast: YUI – Dialog Quickstart Example 1:20:10
  50. 50. yasssu Maxime: Select – Drag - Drop Auswahlseite: Drag & Drop 1:51:00
  51. 51. 1:52 Screencast: Drag & Drop yasssu.com
  52. 52. Opera: Accessible drag and drop using WAI-ARIA Drag & Drop tastaturbedienbar 1:51:00
  53. 53. Screencast: http://devfiles.myopera.com/articles/735/example.html <ul><li>arbeitet mit WAI-ARIA </li></ul><ul><ul><li>aria-grabbed </li></ul></ul><ul><ul><li>aria-dropeffect </li></ul></ul><ul><li>Javascript </li></ul><ul><li>Tabben, Leertaste und </li></ul><ul><li>Pfeiltasten zur Auswahl </li></ul>1:52:10
  54. 54. Die Tastatur und über die Tastatur hinaus ... Teil III: Mission Tabbius beendet 1:52:10
  55. 55. Jetzt könnten noch viele andere Vorträge beginnen ... 2:03:34
  56. 56. Ein wenig psychedelisch muss es schon werden ... 2:04:10
  57. 57. ... am Schluss – macht Kubrick ja auch nicht anders 2:11:20
  58. 58. für mehr Barrierefreiheit 2:20:28
  59. 59. und nun die blaue Donau von Johann Strauss 2:25:00 Sylvia Egger von s prungmarker.de Senior Webproducerin Brainbits GmbH in Köln yasssu.com Stanley Kubrick für seinen Film 2001: Odyssee im Weltraum Dank an Patrick Lauke für seinen Vortrag Keyboard accessibility Mit Dank an
  60. 60. folgen Sie mir doch auf twitter: @sprungmarkers 2:28:51 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

×