2009: eine Tastatur-Odyssee

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

Bookmarklet – Konsole Firebug – schnelles Debuggen

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

Beim Tabben wird das aktuell fokussierte Element hervorgehoben

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

Add-on für Firefox - Einstellungen IDs

Mouseless Browsing

Add-on für Firefox - Einstellungen – Fokussierbare Elemente

Mouseless Browsing

Add-on für Firefox - Einstellungen – Tastaturkürzel

Mouseless Browsing

Add-on für Firefox - ID-Ansicht der fokussierbaren Elemente

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