• 1. Also sprach Zarathustra: ein Web für Alle oder Keinen 00:00 Der A-TAG ´09 präsentiert
  • 2. Am Anfang war die Tastatur und der Walzer 03:30
  • 3. eine sprungmarker Produktion 03:48
  • 4. am Beispiel von yasssu.com 03:99 2009: Eine Tastatur-Odyssee
  • 5. yasssu.com – media for you 04:10
  • 6. Podcast, Video, Personalisierung, Upload, Mobile 04:15
    • Podcastservice (Audio,
    • Video)
    • Prinzip Select-Drag-Drop
    • my yasssu
    • abrufbar via Web, Mobile
    • und Telefon (kein Scherz ;))
    • Upload-Funktion
    • Premium-Möglichkeit
  • 7. gut, wir könnten auch nur tabben 17:52 Teil I: Die Werkzeuge
  • 8. Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an 18:15 LogFocus
  • 9. 18:25 LogFocus Bookmarklet – Konsole Firebug – schnelles Debuggen
  • 10. 18:35 LogFocus Dirk Ginader http://url.ie/2mg3
    • 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
  • 11. Teil der Firefox Accessibility Extension – Add-on für Firefox 18:45 Focus Inspector
  • 12. 18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox Focus Inspector
  • 13. 19:05 Focus Inspector Beim Tabben wird das aktuell fokussierte Element hervorgehoben
  • 14. 19:15 Focus Inspector http://addons.mozilla.org/en-US/firefox/addon/5809
    • Vorteile
    • einfache Handhabung
    • effektiv und gut sichtbarer Fokus
    • Farbprüfung, Linkcodierung einsehbar
    • Nachteile
    • etwas ladeintensiv
    • Probleme mit absoluten Positionierungen (Fokus verlässt sichtbaren Bereich)
  • 15. Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch 19:20 Mouseless Browsing
  • 16. 19:25 Mouseless Browsing Add-on für Firefox - Einstellungen IDs
  • 17. 19:30 Mouseless Browsing Add-on für Firefox - Einstellungen – Fokussierbare Elemente
  • 18. 19:35 Mouseless Browsing Add-on für Firefox - Einstellungen – Tastaturkürzel
  • 19. 19:40 Mouseless Browsing Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente
  • 20. 19:45 Mouseless Browsing http://addons.mozilla.org/en-US/firefox/addon/879
    • 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)
  • 21. Ganz viel an der schönen blauen Donau und Johann Strauss 19:50 Teil II: Tabo Magnetischer Alltag (TMA)
  • 22. und viel zu viele weiße Flecken 31:10 Erreichbarkeit
  • 23. Flash mit Weiterleitung 31:20 Startseite und Vorauswahl
  • 24. 0%: Navigation, Flash 48:10
  • 25. Startseite mit Weiterleitung auf die Übersichtsseite 47:00
  • 26. Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten 48:30 Nicht erreichbare DIVs
    • Aufklappmenü auf onclick
    • aber : nicht mit der Tastatur erreichbar
  • 27. 150% Code-Krampf  führt zu Minus -Erreichbarkeit 48:35 Nicht erreichbare DIVs
  • 28. http://docs.jquery.com/Effects/toggle 48:40 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
  • 29. Player, Auswahl für my yasssu – Hier spielt sich alles ab 48:50 Detailseite Podcast
  • 30. 0%: Navigation, Player, Tabs, Sendungswechsel, Optionen 48:50
  • 31. Podcast-Detailseite mit Player und Auswahl der Sendungen 49:00
  • 32. Screencast: Tastaturbedienung Detailseite 49:30
  • 33. Der Kern von yasssu: Audio- und Videos in diesem Player 49:45 Nicht erreichbarer Player
    • nicht mal im Internet
    • Explorer erreichbar wmode = transparent
    • min. Möglichkeiten
    • Autostart
    • Nur Play + Pause
    • keine Untertitelung
    • Video: keine Audio- Beschreibung
  • 34. Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung 49:55 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
  • 35. Untertitelung CC als Plugin, nicht immer tastaturbedienbar 50:00 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
  • 36. Quelle: MALT Wiki Techshare 2009 - Slideshare 50:00 Lösung – JW Player
  • 37. Podcast Karussell, Uploads, Sortierung yasssuCALL 50:10 my yasssu
  • 38. my yasssu 50:25
  • 39. my yasssu – hier wird es interaktiv 50:30
  • 40. Screencast: Tastaturbedienung my yasssu 50:40
  • 41. Selbst Mouseless Browsing muss da passen ... 50:45 Flash-Karussell ! wmode = transparent !
    • ! Grafiken auf onclick !
    • Semantik!
    • richtige Buttons
  • 42. my yasssu – Upload-Layer 58:28
  • 43. my yasssu – Upload-Layer 58:30
  • 44. Viele Interaktionen werden mit Hilfe von Layern realisiert 58:45
    • Layer erhalten nicht den Fokus
    • Alles wieder und wieder
    • durchtabben
    • Layer schließt sich ungewollt
    • Standards nutzen
    • Beispiel Layerskripte von jQuery
    • auf Tastaturbedienbarkeit testen
    Lost Layers
  • 45. Fokus immer im ersten fokussierbaren Element 1:08:53 jmpopups – tastaturbedienbar ... aber Screenshot: http://otavioavila.com/jmpopups-example/
  • 46. Screencast: jmpopups 1:09:20
  • 47. also weitersuchen  
    • Nicht mit einem Screenreader lesbar weil: display: none;
    • Aber es funktioniert mit:
      • visibility: hidden
      • aus dem sichtbaren Bereich schieben
    1:09:45
  • 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. Screencast: YUI – Dialog Quickstart Example 1:20:10
  • 50. yasssu Maxime: Select – Drag - Drop Auswahlseite: Drag & Drop 1:51:00
  • 51. 1:52 Screencast: Drag & Drop yasssu.com
  • 52. Opera: Accessible drag and drop using WAI-ARIA Drag & Drop tastaturbedienbar 1:51:00
  • 53. Screencast: http://devfiles.myopera.com/articles/735/example.html
    • arbeitet mit WAI-ARIA
      • aria-grabbed
      • aria-dropeffect
    • Javascript
    • Tabben, Leertaste und
    • Pfeiltasten zur Auswahl
    1:52:10
  • 54. Die Tastatur und über die Tastatur hinaus ... Teil III: Mission Tabbius beendet 1:52:10
  • 55. Jetzt könnten noch viele andere Vorträge beginnen ... 2:03:34
  • 56. Ein wenig psychedelisch muss es schon werden ... 2:04:10
  • 57. ... am Schluss – macht Kubrick ja auch nicht anders 2:11:20
  • 58. für mehr Barrierefreiheit 2:20:28
  • 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. 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
Please download to view
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
...

2009: eine Tastatur-Odyssee

by sylvia-egger

on

Report

Category:

Design

Download: 0

Comment: 0

3,110

views

Comments

Description

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)
Download 2009: eine Tastatur-Odyssee

Transcript

  • 1. Also sprach Zarathustra: ein Web für Alle oder Keinen 00:00 Der A-TAG ´09 präsentiert
  • 2. Am Anfang war die Tastatur und der Walzer 03:30
  • 3. eine sprungmarker Produktion 03:48
  • 4. am Beispiel von yasssu.com 03:99 2009: Eine Tastatur-Odyssee
  • 5. yasssu.com – media for you 04:10
  • 6. Podcast, Video, Personalisierung, Upload, Mobile 04:15
    • Podcastservice (Audio,
    • Video)
    • Prinzip Select-Drag-Drop
    • my yasssu
    • abrufbar via Web, Mobile
    • und Telefon (kein Scherz ;))
    • Upload-Funktion
    • Premium-Möglichkeit
  • 7. gut, wir könnten auch nur tabben 17:52 Teil I: Die Werkzeuge
  • 8. Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an 18:15 LogFocus
  • 9. 18:25 LogFocus Bookmarklet – Konsole Firebug – schnelles Debuggen
  • 10. 18:35 LogFocus Dirk Ginader http://url.ie/2mg3
    • 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
  • 11. Teil der Firefox Accessibility Extension – Add-on für Firefox 18:45 Focus Inspector
  • 12. 18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox Focus Inspector
  • 13. 19:05 Focus Inspector Beim Tabben wird das aktuell fokussierte Element hervorgehoben
  • 14. 19:15 Focus Inspector http://addons.mozilla.org/en-US/firefox/addon/5809
    • Vorteile
    • einfache Handhabung
    • effektiv und gut sichtbarer Fokus
    • Farbprüfung, Linkcodierung einsehbar
    • Nachteile
    • etwas ladeintensiv
    • Probleme mit absoluten Positionierungen (Fokus verlässt sichtbaren Bereich)
  • 15. Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch 19:20 Mouseless Browsing
  • 16. 19:25 Mouseless Browsing Add-on für Firefox - Einstellungen IDs
  • 17. 19:30 Mouseless Browsing Add-on für Firefox - Einstellungen – Fokussierbare Elemente
  • 18. 19:35 Mouseless Browsing Add-on für Firefox - Einstellungen – Tastaturkürzel
  • 19. 19:40 Mouseless Browsing Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente
  • 20. 19:45 Mouseless Browsing http://addons.mozilla.org/en-US/firefox/addon/879
    • 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)
  • 21. Ganz viel an der schönen blauen Donau und Johann Strauss 19:50 Teil II: Tabo Magnetischer Alltag (TMA)
  • 22. und viel zu viele weiße Flecken 31:10 Erreichbarkeit
  • 23. Flash mit Weiterleitung 31:20 Startseite und Vorauswahl
  • 24. 0%: Navigation, Flash 48:10
  • 25. Startseite mit Weiterleitung auf die Übersichtsseite 47:00
  • 26. Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten 48:30 Nicht erreichbare DIVs
    • Aufklappmenü auf onclick
    • aber : nicht mit der Tastatur erreichbar
  • 27. 150% Code-Krampf  führt zu Minus -Erreichbarkeit 48:35 Nicht erreichbare DIVs
  • 28. http://docs.jquery.com/Effects/toggle 48:40 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
  • 29. Player, Auswahl für my yasssu – Hier spielt sich alles ab 48:50 Detailseite Podcast
  • 30. 0%: Navigation, Player, Tabs, Sendungswechsel, Optionen 48:50
  • 31. Podcast-Detailseite mit Player und Auswahl der Sendungen 49:00
  • 32. Screencast: Tastaturbedienung Detailseite 49:30
  • 33. Der Kern von yasssu: Audio- und Videos in diesem Player 49:45 Nicht erreichbarer Player
    • nicht mal im Internet
    • Explorer erreichbar wmode = transparent
    • min. Möglichkeiten
    • Autostart
    • Nur Play + Pause
    • keine Untertitelung
    • Video: keine Audio- Beschreibung
  • 34. Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung 49:55 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
  • 35. Untertitelung CC als Plugin, nicht immer tastaturbedienbar 50:00 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
  • 36. Quelle: MALT Wiki Techshare 2009 - Slideshare 50:00 Lösung – JW Player
  • 37. Podcast Karussell, Uploads, Sortierung yasssuCALL 50:10 my yasssu
  • 38. my yasssu 50:25
  • 39. my yasssu – hier wird es interaktiv 50:30
  • 40. Screencast: Tastaturbedienung my yasssu 50:40
  • 41. Selbst Mouseless Browsing muss da passen ... 50:45 Flash-Karussell ! wmode = transparent !
    • ! Grafiken auf onclick !
    • Semantik!
    • richtige Buttons
  • 42. my yasssu – Upload-Layer 58:28
  • 43. my yasssu – Upload-Layer 58:30
  • 44. Viele Interaktionen werden mit Hilfe von Layern realisiert 58:45
    • Layer erhalten nicht den Fokus
    • Alles wieder und wieder
    • durchtabben
    • Layer schließt sich ungewollt
    • Standards nutzen
    • Beispiel Layerskripte von jQuery
    • auf Tastaturbedienbarkeit testen
    Lost Layers
  • 45. Fokus immer im ersten fokussierbaren Element 1:08:53 jmpopups – tastaturbedienbar ... aber Screenshot: http://otavioavila.com/jmpopups-example/
  • 46. Screencast: jmpopups 1:09:20
  • 47. also weitersuchen  
    • Nicht mit einem Screenreader lesbar weil: display: none;
    • Aber es funktioniert mit:
      • visibility: hidden
      • aus dem sichtbaren Bereich schieben
    1:09:45
  • 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. Screencast: YUI – Dialog Quickstart Example 1:20:10
  • 50. yasssu Maxime: Select – Drag - Drop Auswahlseite: Drag & Drop 1:51:00
  • 51. 1:52 Screencast: Drag & Drop yasssu.com
  • 52. Opera: Accessible drag and drop using WAI-ARIA Drag & Drop tastaturbedienbar 1:51:00
  • 53. Screencast: http://devfiles.myopera.com/articles/735/example.html
    • arbeitet mit WAI-ARIA
      • aria-grabbed
      • aria-dropeffect
    • Javascript
    • Tabben, Leertaste und
    • Pfeiltasten zur Auswahl
    1:52:10
  • 54. Die Tastatur und über die Tastatur hinaus ... Teil III: Mission Tabbius beendet 1:52:10
  • 55. Jetzt könnten noch viele andere Vorträge beginnen ... 2:03:34
  • 56. Ein wenig psychedelisch muss es schon werden ... 2:04:10
  • 57. ... am Schluss – macht Kubrick ja auch nicht anders 2:11:20
  • 58. für mehr Barrierefreiheit 2:20:28
  • 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. 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
Fly UP