Also sprach Zarathustra: ein Web für Alle oder Keinen00:01
Der A-TAG ´09 präsentiert
Am Anfang war die Tastatur und der Walzer03:30
eine sprungmarker Produktion03:48
am Beispiel von yasssu.com03:99
2009: Eine Tastatur-Odyssee
yasssu.com – media for you04:10
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
gut, wir könnten auch nur tabben17:52
Teil I: Die Werkzeuge
Bookmarklet von Dirk Ginader – zeigt den aktuellen Fokus an18:15
LogFocus
18:25
LogFocus
Bookmarklet – Konsole Firebug – schnelles Debuggen
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
Teil der Firefox Accessibility Extension – Add-on für Firefox18: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
Vorteile
einfache Handhabung effektiv und gut sichtbarer Fokus Farbprüfung, Linkcodierung einsehbar
Nachteile
etwas ladeintensiv Probleme mit absoluten Positionierungen (Fokus verlässt sichtbaren Bereich)
Add-on für Firefox – zählt mit IDs fokussierbare Elemente durch19: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
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)
Ganz viel an der schönen blauen Donau und Johann Strauss19:50
Teil II: Tabo Magnetischer Alltag (TMA)
und viel zu viele weiße Flecken31:10
Erreichbarkeit
Flash mit Weiterleitung31:20
Startseite und Vorauswahl
0%: Navigation, Flash 48:10
Startseite mit Weiterleitung auf die Übersichtsseite47:00
Fast zu 100% arbeitet yasssu mit diesen DIV-Konstrukten48:30
Aufklappmenü auf onclick aber: nicht mit der Tastatur erreichbar
Nicht erreichbare DIVs
150% Code-Krampf führt zu Minus-Erreichbarkeit48:35
Nicht erreichbare DIVs
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
Player, Auswahl für my yasssu – Hier spielt sich alles ab48:50
Detailseite Podcast
0%: Navigation, Player, Tabs, Sendungswechsel, Optionen48:50
Podcast-Detailseite mit Player und Auswahl der Sendungen49:00
Screencast: Tastaturbedienung Detailseite49:30
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
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
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
Quelle: MALT Wiki Techshare 2009 - Slideshare50:00
Lösung – JW Player
Podcast Karussell, Uploads, Sortierung yasssuCALL50:10
my yasssu
my yasssu50:25
my yasssu – hier wird es interaktiv50:30
Screencast: Tastaturbedienung my yasssu50:40
Selbst Mouseless Browsing muss da passen ...50:45
Flash-Karussell! wmode = transparent !
! Grafiken auf onclick !
Semantik! richtige Buttons
my yasssu – Upload-Layer58:28
my yasssu – Upload-Layer58:30
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
Fokus immer im ersten fokussierbaren Element1:08:53
jmpopups – tastaturbedienbar ... aber
Screenshot: http://otavioavila.com/jmpopups-example/
Screencast: jmpopups1:09:20
also weitersuchen
Nicht mit einem Screenreader lesbar weil: display: none; Aber es funktioniert mit:
visibility: hidden aus dem sichtbaren Bereich schieben
1:09:45
tastaturbedienbar und mit Screenreader nutzbar
YUI – Dialog Quickstart Example
Screenshot: http://developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html
1:19:53
Screencast: YUI – Dialog Quickstart Example1:20:10
yasssu Maxime: Select – Drag - Drop
Auswahlseite: Drag & Drop
1:51:00
1:52
Scr
eenc
ast:
Dra
g &
Dro
p y
asss
u.co
m
Opera: Accessible drag and drop using WAI-ARIA
Drag & Drop tastaturbedienbar
1:51:00
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
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 anders2:11:20
für mehr Barrierefreiheit 2:20:28
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
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