2009: eine Tastatur-Odyssee
-
Upload
sylvia-egger -
Category
Design
-
view
3.118 -
download
0
description
Transcript of 2009: eine Tastatur-Odyssee
![Page 1: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/1.jpg)
Also sprach Zarathustra: ein Web für Alle oder Keinen00:01
Der A-TAG ´09 präsentiert
![Page 2: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/2.jpg)
Am Anfang war die Tastatur und der Walzer03:30
![Page 3: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/3.jpg)
eine sprungmarker Produktion03:48
![Page 4: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/4.jpg)
am Beispiel von yasssu.com03:99
2009: Eine Tastatur-Odyssee
![Page 5: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/5.jpg)
yasssu.com – media for you04:10
![Page 6: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/6.jpg)
Podcastservice (Audio, Video) Prinzip Select-Drag-Drop my yasssu abrufbar via Web, Mobile und Telefon (kein Scherz ;)) Upload-Funktion Premium-Möglichkeit
Podcast, Video, Personalisierung, Upload, Mobile 04:15
![Page 7: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/7.jpg)
gut, wir könnten auch nur tabben17:52
Teil I: Die Werkzeuge
![Page 8: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/8.jpg)
Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an18:15
LogFocus
![Page 9: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/9.jpg)
18:25
LogFocus
Bookmarklet – Konsole Firebug – schnelles Debuggen
![Page 10: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/10.jpg)
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
![Page 11: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/11.jpg)
Teil der Firefox Accessibility Extension – Add-on für Firefox18:45
Focus Inspector
![Page 12: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/12.jpg)
18:55 Teil der Firefox Accessibility Extension – Add-on für Firefox
Focus Inspector
![Page 13: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/13.jpg)
19:05
Focus Inspector
Beim Tabben wird das aktuell fokussierte Element hervorgehoben
![Page 14: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/14.jpg)
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)
![Page 15: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/15.jpg)
Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch19:20
Mouseless Browsing
![Page 16: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/16.jpg)
19:25
Mouseless Browsing
Add-on für Firefox - Einstellungen IDs
![Page 17: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/17.jpg)
19:30
Mouseless Browsing
Add-on für Firefox - Einstellungen – Fokussierbare Elemente
![Page 18: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/18.jpg)
19:35
Mouseless Browsing
Add-on für Firefox - Einstellungen – Tastaturkürzel
![Page 19: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/19.jpg)
19:40
Mouseless Browsing
Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente
![Page 20: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/20.jpg)
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)
![Page 21: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/21.jpg)
Ganz viel an der schönen blauen Donau und Johann Strauss19:50
Teil II: Tabo Magnetischer Alltag (TMA)
![Page 22: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/22.jpg)
und viel zu viele weiße Flecken31:10
Erreichbarkeit
![Page 23: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/23.jpg)
Flash mit Weiterleitung31:20
Startseite und Vorauswahl
![Page 24: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/24.jpg)
0%: Navigation, Flash 48:10
![Page 25: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/25.jpg)
Startseite mit Weiterleitung auf die Übersichtsseite47:00
![Page 26: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/26.jpg)
Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten48:30
Aufklappmenü auf onclick aber: nicht mit der Tastatur erreichbar
Nicht erreichbare DIVs
![Page 27: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/27.jpg)
150% Code-Krampf führt zu Minus-Erreichbarkeit48:35
Nicht erreichbare DIVs
![Page 28: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/28.jpg)
http://docs.jquery.com/Effects/toggle48: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
![Page 29: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/29.jpg)
Player, Auswahl für my yasssu – Hier spielt sich alles ab48:50
Detailseite Podcast
![Page 30: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/30.jpg)
0%: Navigation, Player, Tabs, Sendungswechsel, Optionen48:50
![Page 31: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/31.jpg)
Podcast-Detailseite mit Player und Auswahl der Sendungen49:00
![Page 32: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/32.jpg)
Screencast: Tastaturbedienung Detailseite49:30
![Page 33: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/33.jpg)
Der Kern von yasssu: Audio- und Videos in diesem Player49:45
nicht mal im Internet Explorer erreichbar wmode = transparent min. Möglichkeiten Autostart Nur Play + Pause keine Untertitelung Video: keine Audio- Beschreibung
Nicht erreichbarer Player
![Page 34: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/34.jpg)
Barrierefreiheit nun mit 2 Plugins + stark in Entwicklung49: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
![Page 35: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/35.jpg)
Untertitelung CC als Plugin, nicht immer tastaturbedienbar50: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
![Page 36: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/36.jpg)
Quelle: MALT Wiki Techshare 2009 - Slideshare50:00
Lösung – JW Player
![Page 37: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/37.jpg)
Podcast Karussell, Uploads, Sortierung yasssuCALL50:10
my yasssu
![Page 38: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/38.jpg)
my yasssu50:25
![Page 39: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/39.jpg)
my yasssu – hier wird es interaktiv50:30
![Page 40: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/40.jpg)
Screencast: Tastaturbedienung my yasssu50:40
![Page 41: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/41.jpg)
Selbst Mouseless Browsing muss da passen ...50:45
Flash-Karussell! wmode = transparent !
! Grafiken auf onclick !
Semantik! richtige Buttons
![Page 42: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/42.jpg)
my yasssu – Upload-Layer58:28
![Page 43: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/43.jpg)
my yasssu – Upload-Layer58:30
![Page 44: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/44.jpg)
Viele Interaktionen werden mit Hilfe von Layern realisiert58: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
![Page 45: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/45.jpg)
Fokus immer im ersten fokussierbaren Element1:08:53
jmpopups – tastaturbedienbar ... aber
Screenshot: http://otavioavila.com/jmpopups-example/
![Page 46: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/46.jpg)
Screencast: jmpopups1:09:20
![Page 47: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/47.jpg)
also weitersuchen
Nicht mit einem Screenreader lesbar weil: display: none; Aber es funktioniert mit:
visibility: hidden aus dem sichtbaren Bereich schieben
1:09:45
![Page 48: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/48.jpg)
tastaturbedienbar und mit Screenreader nutzbar
YUI – Dialog Quickstart Example
Screenshot: http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html
1:19:53
![Page 49: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/49.jpg)
Screencast: YUI – Dialog Quickstart Example1:20:10
![Page 50: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/50.jpg)
yasssu Maxime: Select – Drag - Drop
Auswahlseite: Drag & Drop
1:51:00
![Page 51: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/51.jpg)
1:52
Scr
eenc
ast:
Dra
g &
Dro
p y
asss
u.co
m
![Page 52: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/52.jpg)
Opera: Accessible drag and drop using WAI-ARIA
Drag & Drop tastaturbedienbar
1:51:00
![Page 53: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/53.jpg)
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
![Page 54: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/54.jpg)
Die Tastatur und über die Tastatur hinaus ...
Teil III: Mission Tabbius beendet
1:52:10
![Page 55: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/55.jpg)
Jetzt könnten noch viele andere Vorträge beginnen ...2:03:34
![Page 56: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/56.jpg)
Ein wenig psychedelisch muss es schon werden ... 2:04:10
![Page 57: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/57.jpg)
... am Schluss – macht Kubrick ja auch nicht anders2:11:20
![Page 58: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/58.jpg)
für mehr Barrierefreiheit 2:20:28
![Page 59: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/59.jpg)
und nun die blaue Donau von Johann Strauss2:25:00
Sylvia Egger
von
sprungmarker.de
Senior WebproducerinBrainbits 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
![Page 60: 2009: eine Tastatur-Odyssee](https://reader033.fdocument.pub/reader033/viewer/2022051209/5488f908b47959d80c8b5816/html5/thumbnails/60.jpg)
folgen Sie mir doch auf twitter: @sprungmarkers2:28:51
Credits
FreePixels.com (Tastaturbilder)Johann und Richard Strauss
Györgi Ligeti
MALT Wiki Techshare 2009 – Nick Freerarhttp://www.slideshare.net/nfreear/malt-wiki-techshare2009
A more accessible Flowplayerhttp://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