2009: eine Tastatur-Odyssee
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

2009: eine Tastatur-Odyssee

on

  • 3,061 views

Präsentation am Wiener A-Tag `09 - Analyse der Tastaturbedienbarkeit des österreichischen Web 2.0 Startup yasssu.com. ...

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)

Statistics

Views

Total Views
3,061
Views on SlideShare
3,055
Embed Views
6

Actions

Likes
4
Downloads
14
Comments
0

1 Embed 6

http://www.slideshare.net 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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