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