Also sprach Zarathustra: ein Web für Alle oder Keinen 00:00 Der A-TAG ´09 präsentiert
Am Anfang war die Tastatur und der Walzer 03:30
eine sprungmarker  Produktion 03:48
am Beispiel von yasssu.com 03:99 2009: Eine Tastatur-Odyssee
yasssu.com – media for you 04:10
Podcast, Video, Personalisierung, Upload, Mobile  04:15 <ul><li>Podcastservice (Audio, </li></ul><ul><li>Video) </li></ul>...
gut, wir könnten auch nur tabben 17:52 Teil I: Die Werkzeuge
Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an 18:15 LogFocus
18:25 LogFocus Bookmarklet – Konsole Firebug – schnelles Debuggen
18:35 LogFocus Dirk Ginader  http://url.ie/2mg3 <ul><li>Vorteile </li></ul><ul><li>einfache Handhabung </li></ul><ul><li>H...
Teil der Firefox Accessibility Extension – Add-on für Firefox 18:45 Focus Inspector
18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox Focus Inspector
19:05 Focus Inspector Beim Tabben wird das aktuell fokussierte Element hervorgehoben
19:15 Focus Inspector http://addons.mozilla.org/en-US/firefox/addon/5809 <ul><li>Vorteile </li></ul><ul><li>einfache Handh...
Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch 19:20 Mouseless Browsing
19:25 Mouseless Browsing Add-on für Firefox  - Einstellungen IDs
19:30 Mouseless Browsing Add-on für Firefox  - Einstellungen – Fokussierbare Elemente
19:35 Mouseless Browsing Add-on für Firefox  - Einstellungen – Tastaturkürzel
19:40 Mouseless Browsing Add-on für Firefox  - ID-Ansicht der fokussierbaren Elemente
19:45 Mouseless Browsing http://addons.mozilla.org/en-US/firefox/addon/879 <ul><li>Vorteile </li></ul><ul><li>einfache Han...
Ganz viel an der schönen blauen Donau und Johann Strauss 19:50 Teil II: Tabo Magnetischer Alltag  (TMA)
und viel zu viele weiße Flecken 31:10 Erreichbarkeit
Flash mit Weiterleitung 31:20 Startseite und Vorauswahl
0%: Navigation, Flash  48:10
Startseite mit Weiterleitung auf die Übersichtsseite 47:00
Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten 48:30 Nicht erreichbare DIVs <ul><li>Aufklappmenü auf onclick </li...
150% Code-Krampf    führt zu  Minus -Erreichbarkeit 48:35 Nicht erreichbare DIVs
http://docs.jquery.com/Effects/toggle 48:40 Lösung <ul><li>Semantik </li></ul><ul><ul><li>standardkonforme Hauptnavigation...
Player, Auswahl für my yasssu – Hier spielt sich alles ab 48:50 Detailseite Podcast
0%: Navigation, Player, Tabs, Sendungswechsel, Optionen 48:50
Podcast-Detailseite mit Player und Auswahl der Sendungen 49:00
Screencast: Tastaturbedienung Detailseite 49:30
Der Kern von yasssu: Audio- und Videos in diesem Player 49:45 Nicht erreichbarer Player <ul><li>nicht mal im Internet </li...
Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung 49:55 Lösung I – JW Player <ul><li>Standards nutzen! </li></ul><...
Untertitelung CC als Plugin, nicht immer tastaturbedienbar 50:00 Lösung II – Flowplayer <ul><li>viele Optionen </li></ul><...
Quelle: MALT Wiki Techshare 2009 - Slideshare 50:00 Lösung – JW Player
Podcast Karussell, Uploads, Sortierung yasssuCALL 50:10 my yasssu
my yasssu 50:25
my yasssu – hier wird es interaktiv 50:30
Screencast: Tastaturbedienung my yasssu 50:40
Selbst Mouseless Browsing muss da passen  ... 50:45 Flash-Karussell ! wmode = transparent ! <ul><li>! Grafiken auf onclick...
my yasssu – Upload-Layer 58:28
my yasssu – Upload-Layer 58:30
Viele Interaktionen werden mit Hilfe von Layern realisiert 58:45 <ul><li>Layer erhalten nicht den Fokus </li></ul><ul><li>...
Fokus immer im ersten fokussierbaren Element 1:08:53 jmpopups – tastaturbedienbar ... aber Screenshot:  http://otavioavila...
Screencast: jmpopups 1:09:20
also weitersuchen    <ul><li>Nicht mit einem Screenreader lesbar weil: display: none; </li></ul><ul><li>Aber es funktion...
tastaturbedienbar und mit Screenreader nutzbar YUI – Dialog Quickstart Example  Screenshot:  http://developer.yahoo.com/yu...
Screencast: YUI – Dialog Quickstart Example 1:20:10
yasssu Maxime: Select – Drag - Drop Auswahlseite: Drag & Drop 1:51:00
1:52 Screencast: Drag & Drop  yasssu.com
Opera: Accessible drag and drop using WAI-ARIA Drag & Drop tastaturbedienbar 1:51:00
Screencast:  http://devfiles.myopera.com/articles/735/example.html <ul><li>arbeitet mit WAI-ARIA </li></ul><ul><ul><li>ari...
Die Tastatur und über die Tastatur hinaus ...  Teil III: Mission Tabbius beendet 1:52:10
Jetzt könnten noch viele andere Vorträge beginnen ... 2:03:34
Ein wenig psychedelisch muss es schon werden ...  2:04:10
... am Schluss – macht Kubrick ja auch nicht anders 2:11:20
für mehr Barrierefreiheit  2:20:28
und nun die blaue Donau von Johann Strauss 2:25:00 Sylvia Egger von s prungmarker.de Senior Webproducerin Brainbits GmbH i...
folgen Sie mir doch auf twitter:  @sprungmarkers 2:28:51 Credits FreePixels.com  (Tastaturbilder) Johann und Richard Strau...
Nächste SlideShare
Wird geladen in …5
×

2009: eine Tastatur-Odyssee

2.091 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
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.091
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
15
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×