Ausgewählter Vortrag:
2009: Eine Tastatur-Odyssee
-
16.10.2009, 10:35–11:10 Uhr, Raum 1
Versucht man eine Webseite mit Tastatur zu bedienen, endet das fast immer noch in einer Tastatur-Odyssee. Hinreichende Gründe also, sich immer wieder die Probleme und Hürden genauer anzusehen. Wir nehmen uns das österreichische Web 2.0 Startup yasssu.com vor, das im Web, mobil und per Telefon Podcast - Audio und Videos - auswählen und abonnieren lässt. Versucht man nun diese Webseite mit Tastatur zu nutzen, stößt man auf viele weiße, unerreichbare Flecken: nicht fokussierbare Elemente wie DIV, Bilder und Tabellen, nicht erreichbare Player, lost Layer und ein für Tastaturnutzer nicht optimiertes Drag & Drop.
Der ganz normale Tastaturalltag und typische Probleme im Web 2.0 Alltag eben. Damit es uns damit und danach besser geht, werden ein Add-ons und positive Beispiele vorgestellt, mit denen wir besser debuggen und surfen: Schließlich geht es um mehr, als bloß nur zu tabben.
Damit Barrierefreiheit endlich auch zur Routine wird.
Unterlagen
Transkription:
Moderation Eric Eggert: Okay. Silvia ist Autorin und Teamlead-Senior-Frontend-Developer bei einer Agentur in Köln. Und sie setzt sich sehr aktiv für barrierefreies Webdesign und Webstandards ein. Versuch mal hinten den Stecker noch. Und in ihrem Blog „Sprungmarker.de“ zum Beispiel sammelt sie nicht nur interessante Links und Postings und Meinungen, sondern sie kommentiert auch Artikel und greift auch einzelne Webseiten raus, die sie Fundstücke nennt. Und die müssen sich dann ihrem kritischen Auge beugen. (…) Finde ich ganz gut. Und jetzt werden wir eine Demonstration sehen eines österreichischen Web-Start-ups und die Barrierefreiheit, Probleme die da passieren können. (…) Bitte.
Sylvia Egger: Ja, gestern war ja der Tag der Tastatur und heute gibt es quasi den Vortrag dazu. Das ist natürlich jetzt nur ein Zufall, aber es passt ganz gut. Eric hat’s ja schon gesagt, ich habe einen ganz speziellen Fokus in dem Vortrag, das ist die Tastaturbedienbarkeit. Und ich hab mir das österreichische Start-up angeguckt, also Web 2.0, Start-up „Yassu.com“. Ich hab zwar ein paar Umfragen gemacht aber offensichtlich ist das wenig bekannt in Österreich. Nur wenn man googelt, quasi unter dem Stichwort Österreich, Start-up, Web 2.0, kommt eigentlich immer Yassu.com. Die haben auch relativ viel Geld gekriegt. Keine Ahnung, warum es da nicht da so bekannt ist. Aber es wird immer im Zusammenhang mit Soup.io oder Tupalo genannt. Ich hab es auch genommen, weil es eben sehr typisch ist. Es gibt eine große Bandbreite an Problemen, die da auftreten. Deswegen habe ich es dann ausgewählt. Ich werde zuerst auf Yassu.com eingehen, was das eigentlich ist. Dann habe ich mir auch ein bisschen beholfen. Weil man kann einfach natürlich durch die Webseite mit der Tastatur gehen. Man kann sich aber einfach auch Mal ein bisschen Arbeit machen und gucken gibt es nicht ein paar Tools, die mir auch ein bisschen behilflich sein können dabei. Dann gucken wir uns einzelne Seiten an von Yassu.com. Da gehen wir dann einfach ein bisschen durch und gucken, was da die gröbsten Probleme sind.
Und ich möchte auch ein bisschen was zur Präsentation selbst sagen. Weil das ist jetzt nicht so selbsterklärend. Ich hab, während ich die Präsentation erstellt hab, den Film vom Kubrik wieder neu entdeckt: 2001 Odyssee im Weltraum und die läuft quasi so ein bisschen als Film durch die Präsentation. Also es gibt einen klassischen Vorspann, es gibt einen Abspann und dazwischen kommt meine Analyse. Und die Zahlen, die immer links laufen, sind nicht die Zahlen, der Vortragszeit, sondern die Zahlen beziehen sich auf den Film selbst. Quasi auf eine Szene im Film. Also wenn jemand Lust hat, kann er das dann einfach mal nachprüfen. Und ähm (lacht) und ähm es gibt auch auf „last.fm“ kann man sich dann auch quasi den Soundtrack dazu holen, wenn man mal Lust dazu hat. (…) Das ist jetzt der Vorspann, da sage ich jetzt nicht so viel dazu. (Lacht) (…) Nein einen Sound gibt es keinen. Also dass ist tatsächlich wirklich nur ein stummer Vortrag. (lacht) Also vielleicht kennt der eine oder andere dieses Logo von 2001 Odyssee im Weltraum. Das ist ein bisschen zurechtgebaut. Ähm das ist jetzt nicht direkt die Startseite von Yassu.com sondern, während ich den Vortrag gemacht hab, hatte Yassu leider angefangen, die Webseite umzubauen. Sie haben so eine Art Tour davorgesetzt, damit man ein bisschen mitkriegt, um was es in Yassu geht. Und direkt ein Formular, um sich da anzumelden. Das geht mit Tastatur ganz gut. Nur ab dieser Seite wird’s dann halt sehr schlimm.
Das Publikum lauscht gespannt dem Vortrag.
Yassu.com ist ein Podcastservice. Also man kann aus einer vorgefertigten Auswahl Podcasts auswählen. Video, Audio, kann die quasi anhören, kann die in MyYassu sortieren. Und kann sie abrufen auf dem Web, auf mobile und auf Telefon. Also ich hab das wirklich getestet, ne, also das kann man auch per Festnetz machen. Da muss man sich einfach anmelden das war ein bisschen für mich eher eine antiquarische (lacht) Geschichte. Aber ich hab mir sagen lassen, dass das durchaus eine Zukunftssache sein kann. Weil die Leute haben immer mehr Minuten zu vertelefonieren. Und dann nehmen sie sich halt so ein Headset und dann hören sie sich halt einfach die Podcasts durch. Also ich werde es wahrscheinlich nicht nutzen, aber angeblich sei das doch auch eine zukunftsträchtige Sache. Und man kann auch selber Videos oder Audio hochladen und die dann auch mit in MyYassu einfach pflegen. Und es gibt eine Premiummöglichkeit, die ausgebaut wird, jetzt kann man quasi einfach nur mehr Podcasts als drei ja einfach auswählen und nutzen. (..)
Jetzt gucken wir vorher, bevor wir überhaupt uns Yassu ansehen, ein paar Werkzeuge an. Ich hab halt geguckt, gibt es überhaupt was, dass man sich einfach ein bisschen behelfen kann. Weil das Tappen auf so einer Seite wie Yassu, ist halt eher so ein Blindtabben. Man weiß teilweise gar nicht, wo man ist und da dachte ich mir, gut da muss es irgendwas geben, mit dem wir so als Entwickler einfach ein bisschen mehr sehen, was wir eigentlich tun. Und da beginnt zuerst LogFocus, das ist ein Bookmarklet von Dirk Ginader. Das kann man sich einfach oben in den Browser reinpacken und das zeigt den aktuellen Fokus in der Konsole an. Das sieht dann so aus. Also die kennt ihr vielleicht. Also es gibt ja Firebug, da gibt es eine Möglichkeit, die Konsole zu aktivieren. Und immer, wenn ich durch tabbe, zeigt mir in der Konsole quasi an, wo bin ich grade. Das kann man hier sehen: Input ID Username, das wäre dann oben quasi der Nutzername. Und das läuft halt so ein bisschen durch, das ist wie so eine Historie. Den Vorteil von diesem Tool ist, dass es eben sehr einfach ist. Ich pack mir das Bookmarklet einfach oben rein und dann hab ich so eine Historie. Es ist browserunabhängig, ich hab fast überall einen Developer-Zustand im Browser, wo ich die Konsole habe und die bedienen kann. Der Nachteil ist, ich sehe halt immer noch nicht, wo ich auf der Webseite bin. Ne, ich kann zwar unten in meine Konsole gucken, aber das war’s halt dann. Und der Nachteil ist auch, es gibt halt vom Browser fokussierbare Elemente. Die sind halt Links, oder Formulare, und weiter komm ich halt mit dem Tool dann auch nicht. Alles andere kann ich dann auch nicht erreichen. Und das wird für Yassu.com eben sehr interessant. Weil die nutzen fast keine Links. Sondern haben lauter andere Elemente, die sie fokussieren. (..)
Das zweite Tool ist der Fokus-Inspektor. Das ist eine Option in dem Add-on Firefox Accessibility Extension. Das sieht dann so aus. Den kann man einfach anwählen. Also man ruft die Seite auf, wählt dieser Fokus-Inspektor an, dann erhält man links so eine Sidebar. Und man kann dann einfach durchtabben. Rechts sieht man dann endlich mal den Fokus, ja. Ich kann dann rechts sehe ich dann immer in diesem gelben Rahmen wo bin ich ungefähr. Und links kann ich sehen, aha es ist ein Input Feld, das hat entweder ein Label oder nicht. Oder es hat eine Klasse. Also da gibt es noch mehr Optionen, die zeige ich jetzt gar nicht. Es ist schon mal ein ziemlicher Vorteil. Weil ich eben sehen kann, wo ich auf der Webseite tatsächlich mit der Tastatur bin. Auch wieder eben, einfache Handhabung, effektiv und gut sichtbar. Er hat dann auch noch so Specials. Man kann auch die Farben prüfen, das ist jetzt nicht so wichtig. Nachteile: Es ist sehr ladeintensiv. Also wenn man dann wirklich mit diesem Tool tabbt, dann kann es teilweise so richtig hmm. (lacht) Es ist so ein bisschen holprig, finde ich. Ich meine ich hab jetzt nicht so den langsamen Rechner. Und was für Yassu.com natürlich dann auch ein Problem war, dieses Tool kommt nicht zurecht, wenn jemand mit absoluten Positionierungen arbeitetet. Yassu arbeitet fast nur mit absoluten Positionierungen und dann ist dieses kleine gelbe Feld oft irgendwo auf der Webseite, man sieht es dann halt nicht mehr, ne. Also es ist ein bisschen, bisschen merkwürdig. Aber ich weiß nicht, ob es am Tool selbst liegt, oder an Yassu, das kann ich jetzt nicht sagen. Das dritte Tool ist „Mouseless Browsing“. Ist auch wieder ein Add-on für Firefox. Und das macht ganz interessante Sachen. Die ganzen Elemente der Webseite, die mit der Tastatur erreichbar werden können, können mit Zahlen symbolisiert werden.
Das heißt, ich kann, ich brauch nicht mehr durchtabben, sondern ich gebe einfach die Zahl 145 ein und bin dann direkt auf dem Link. Das ist im Grunde natürlich ein Tool für Leute, die tatsächlich mit Tastatur arbeiten, permanent. Aber als Entwickler ist es auch nicht schlecht, weil dann kann ich einfach mal gucken, wo sind überall Zahlen. Das heißt, das sind schon mal alles irgendwie Sachen, die ich potenziell erreichen kann. Und dieses Tool bietet dann noch darüber hinaus eine Möglichkeit zu sagen, okay, ich hab jetzt die Links, kann ich erreichen, dann kann ich die Formelemente erreichen und jetzt kann ich auch noch anhaken, ok Flash will ich auch noch erreichen, und zum Beispiel DIV-Elemente und das für Yassu ganz interessant, weil Yassu hat fast alles auf DIV-Elemente gelegt. So man sieht es hier, ich weiß nicht, wie gut jetzt hier die Auflösung ist. Man sieht hier die Nummerierungen. Übersicht 139, das könnte ich jetzt eintippen und dann bin ich direkt auf diesem Link. Auch zum Beispiel das Flash wird eben, weil das angehakt ist, auch das Flash kann man dann erreichen mit 143. Wie diese Nummern tatsächlich nummeriert werden, kann ich leider nicht sagen. Die Vorteile sind eben klar, es ist auch einfach, braucht es nur installieren. Dann kann ich auch zusätzliche Elemente ansteuern. Die Probleme dieses Tools sind, es werden tatsächlich nicht alle Elemente erfasst. Weil, ich hab ja nur die Option, okay nimm auch noch Flash und nimm noch DIV.
Aber es gibt tatsächlich Seiten, die haben dann noch so was wie leere Links, die kann ich dann nicht erreichen, oder Bilder die auch auf On-Click funktionieren. Und was ich natürlich hier in dem Tool auch nicht habe, ich sehe zwar einen Nummer, aber richtig sichtbar ist es dann auch nicht, okay, bin ich jetzt genau auf diesem Link. Ich kann halt mit Nummern arbeiten. Also diese drei, das mag vielleicht jetzt alles sehr technisch klingen, aber ihr seht es dann in den Screen-Casts, wie die diese Tools arbeiten und das ist wirklich hilfreich bei solchen Seiten, die tatsächlich eben sehr schwer per Tastatur erreicht werden können. Ja wir begeben uns jetzt einfach mal direkt zu Yassu. (...) Das Erste ist eben diese Startseite. Die hat ein Flash und das Flash leitet dann zu einer Übersichtsseite weiter. Das würde dann so aussehen: Hier sieht man das Flash und jetzt sehen wir eine Ansicht, wie ein Tastaturnutzer die Seite sieht. Das ist, was der Tastaturnutzer erreichen kann. Also wir haben zuerst diese Seite gehabt, und jetzt haben wir es so, ne. Also das ist einfach schon sehr begrenzt. Weil wichtige Dienste kann er im Grunde dann nur über die Suche erreichen. Und das liegt daran, dass fast zu 100 Prozent ist das Problem bei Yassu, dass alles was bei Yassu funktioniert, auf DIV-Elementen gesetzt ist. Alle DIVs sind mit unglaublichen Dingen belegt und die können halt so einfach schlicht nicht erreicht werden. Ich weiß nicht, warum sie zum Beispiel einfach nicht eine Liste mit Links machen, die aufklappbar sind, ne, machen sie einfach nicht. Also der Quellcode sieht auch sehr interessant aus. Ist ich weiß nicht, vielleicht gibt es eine neue Häkeltechnik oder so, ja. (lacht, Publikum lacht)
Ich mein, ich hab gehört, ich darf nicht so über Yassu schimpfen. Ich denke das ist ein Projekt, das es seit 2007 gibt und ich nehme an, dass da einfach sehr viele Entwickler dran gearbeitet haben und da halt immer wieder was draufgesetzt haben. Aber so sieht der Quellcode an sich aus. Und man kann sich vorstellen, man sieht ja auch dieses DIV-Konstrukt, alles ist auf DIV gelegt und dann steht da halt Übersicht, ne. Es gibt einfach im Grunde keine Navigation und deswegen sage ich, was Yassu einfach fehlt, ist die Semantik, ja. Also die haben halt überhaupt keine Semantik, sie haben auch keine Überschriften. Wenn man einfach eine standardkonforme Hauptnavigation machen würde, mit Listen und echte Links mal setzen würde, dann würde das schon sehr helfen. Weil dann würde man vielleicht mal die Hauptnavigation erreichen. Und wenn man das jetzt noch aufklappbar machen möchte, dann kann man durchaus einfach ein Standardframework nutzen, wie jQuery, weil der Basiseffekt Toggle, um etwas ein- und auszuklappen, ist tastaturzugänglich, ja. Also ich denk, ich weiß, ich kann ja nicht sagen. Man müsste wahrscheinlich so einen Yassu-Entwickler neben sich sitzen haben, um den mal zu interviewen. Jetzt kommen wir zur Detailseite des Podcasts. Die ist natürlich sehr wichtig, weil, da sitzt auch der Player. Und, du hast die Möglichkeit eben verschiedene, vom ORF Ö1 Journal, kann man verschiedene Sendungen einfach anwählen unten, man sieht das Morgenjournal, da gibt es halt die verschiedenen Journale. Und jetzt gucken wir uns wieder an, was ein Tastaturnutzer tatsächlich erreichen kann, nämlich fast nix, ne. Er kann empfehlen, das kann er aber auch nicht wirklich, ne. Weil das ist in einem Layer. Das geht in einem Layer auf, empfehlen. Und den Layer kann er leider auch nicht erreichen. Aber immerhin, ne. Und er kann die Social Media Icons bedienen. Das finde ich ja schon unglaublich, ne. Und er kann downloaden, kann er auch nicht wirklich. Weil da ist wieder ein Layer, den er auch nicht erreichen kann.
Sylvia Egger beim Vortrag
Also es ist halt wirklich sehr begrenzt, was der machen kann hier. Und das sehen wir jetzt mal in einem Screen-Cast. Links sehen wir Fokus Inspector und unten läuft das Tool LogFocus. Das läuft jetzt einfach so durch. (…) Und manchmal verschwindet dieses Kästchen, das gelbe Kästchen, weil das wieder so eine absolute Positionierung ist, das sieht man hier unten am horizontalen Balken, ne, das ist irgendwo ganz draußen. Jetzt, die Navigation wird jetzt übersprungen, jetzt sind wir noch in der Suche. Die Navigation, witzigerweise unten diese, diese Podcasts-Empfehlungen, die werden erreicht. (…) Jetzt kommt der Player, da kommen wir nicht hin, den überspringen wir mal. Und jetzt sind wir dann nur im Downloadbereich, ne. Also jetzt kommen die ganzen Social Icons. Und hier könnte man unten jetzt die Sendungen aussuchen. Aber da kommt man gar nicht hin. Man hüpft quasi jetzt dann nur noch auf der rechten Seite, um diese Sachen downzuloaden. Wenn man eingeloggt ist und wirklich registrierter Nutzer, dann wird es wenigstens heruntergeladen. Dann kommt kein Layer mehr, dann kriegt man wenigstens die Datei. Aber das nutzt einem ja auch nichts, weil, man will ja die Sachen vielleicht mobile-mäßig auch mal anhören. Ja (…) das größte Problem bei Yassu ist, dass dieser Player halt nicht erreicht werden kann. Die haben es sogar geschafft, weil direkt den Fokus in den Player zu setzen. Das geht eigentlich im Grunde nur im Internet Explorer. Und nicht mal im Internet Explorer ist das möglich, weil der Player auf wmode transparent gesetzt ist, ne. Dasselbe wäre wmode opaque. Das heißt, man hätte ja auch nicht viel.
Man kommt zum Beispiel mit dem Mouseless Browsing tatsächlich in diesen Player hinein, aber er ist nicht tastaturbedienbar. Man sitzt zwar in dem Player, aber man kann den weder irgendwie ja starten oder-oder-oder auf Pause setzen. Er hat ja auch keine Optionen, weil er nutzt ja auch quasi vorgefertigtes Material zum Beispiel vom ORF, die ja selber keine Untertitelung anbieten. Also transportiert er quasi einen sekundären Inhalt. Was halt irgendwie sehr schade ist. Man kann nicht sehr viel damit machen. Und, da kann ich sagen es gibt halt diese zwei Lösungen jetzt für mich so. Den JW-Player, aber der würde in dem Sinn auch nichts nutzen, weil sie wahrscheinlich diese Untertitelung ohnehin nicht haben. Aber ich sollte ihn wenigstens benutzen, weil, der ist mit Tastatur bedienbar. Er hat viele Optionen. Er hat eine Untertitelung, man kann auch eine Audiobeschreibung hinzufügen. Er hat eine Playlist, das wäre nämlich zum Beispiel auch eine Option für Yassu, eine Playlist. Weil diese untere Liste ist ohnehin nicht zugänglich. Dann wäre man froh, wenn wenigstens eine Playlist zugänglich wäre. Und zum JW-Player muss man sagen, der ist zwar sehr stark im Barrierefreien unterwegs, hat aber derzeit einen anderen Schwenk genommen und ich muss ihn beobachten. Er hat die Plug-ins für Barrierefreiheit mittlerweile outgesourced und wenn man versucht da immer Up-To-Date zu bleiben, hat man so seine Probleme. Man kann Fragen stellen im Forum, teilweise kann man die Untertitelung nicht mehr ein- oder ausblenden, der Button steht nur da. Also ich hab da versucht dann immer nachzufragen, aber man spürt so ein bisschen, dass der Fokus aus der Barrierefreiheit leider weggeht. Man muss das einfach beobachten. (..)
Die zweite Überraschung war für mich der Flowplayer. Der Flowplayer den hab ich eigentlich immer an Kunden irgendwie verkauft, die halt einfach was Schickes wollten. Und ich war eigentlich nie so überzeugt, dass der tatsächlich auch barrierefreien Fokus hat. Da war ich ein bisschen positiv überrascht. Er hat auch viele Optionen. Er sieht natürlich auch superschick aus. Und wie man sieht, er hat auch die Möglichkeit mit einem Plug-in Untertitelung reinzuholen. Er hat auch verschiedene Formate. Also der JW-Player hat nur ein Format, Time-Text, aber der Flowplayer hat noch andere Möglichkeiten um Untertitelungen eben reinzuholen. Audio-Description ist so ein bisschen eine Sache. Sie sagen, man kann ja einfach ein Audio Plug-in nehmen. Gut, die kann man dann nicht ein- und ausblenden. Er hat auch eine Playlist und es gibt eben eine Bewegung, den auch accessible zu machen. Da habe ich eine Variante verlinkt dann im Verzeichnis hinten. Und die setzen alle auf so einem Plug-in an, das Controlbar heißt. Und das nutzt ja auch zum Beispiel Christian Heilmann, diesen Ansatz, dass man sagt, die ganze Steuerung eines Players setzen wir einfach extern. Dann kann er mit der Tastatur einfach erreicht werden. Dann kann ich einfach DIV-Tags nehmen oder was auch immer. Ich kann einfach HTML draus machen. Damit kann ich die Steuerung quasi erreichen und der Player an sich, das bleibt einfach getrennt davon. Und das kann der Flowplayer auch. Der hat eben so ein Plug-in, das heißt Controlbar. Da setzen dann diese ganzen Leute an, um diesen Player zugänglicher zu machen. Fand ich sehr interessant, sehr spannend, da will ich einfach mich ein bisschen genauer damit beschäftigen. (..)
Hier noch mal eine kurze Übersicht. Da ist auch der Easy-Youtube Player, den ja viele von euch hier kennen. Man sieht, dass der Flowplayer halt dann doch gegenüber dem JW-Player schon einiges aufgeholt hat und ja, kann ich jetzt grade mal empfehlen. Also wenn man einem Kunden tatsächlich jetzt auch mal was Schickes verkaufen will, ne. Das nächste schwierige Gebiet ist MyYassu. Das würde dann so ausschauen. Das sieht fast so aus, rechts, wie so eine kleine Applikation. Aber der Schein täuscht. Also das Ganze ist quasi etwas Zusammengewürfeltes. In der Mitte haben wir so ein Flash-Karussell, wo man so zwischen einzelnen Podcasts hin und her blättern kann. Unten ist so eine Tabelle, ja. Und oben sind diverse Grafiken, die quasi wieder mit On-Click arbeiten. Der Tastaturnutzer sieht dann Folgendes: (lacht) Ja ich wusste, dass das gut kommt. (lacht) Und, tja also von MyYassu hat der Tastaturnutzer dann eher sehr wenig. Da haben wir halt, das sieht man jetzt im Screen-Cast wieder, kann man wieder verfolgen. Dauert immer ein bisschen, weil dieses Plug-in tatsächlich ein bisschen langsam ist. Na (…) (lacht) jetzt sind wir wieder in der Suche. Dann überspringen wir wieder die Navigation. Dann ist er wieder unten in der Empfehlungsriege. Und jetzt kommt’s, jetzt kommt’s, ne (...). Jetzt sind wir ganz unten im Unternehmen. Also wir haben den ganzen rechten Bereich übersprungen, wir können den gar nicht erreichen. (...) Das Problem hatte ich ja schon gesagt, das ist wieder im Flash-Karussell, das ist wieder versteckt mit wmode transparent. Deswegen kann man da gar nicht hin. Die Grafiken sind alle auf On-Click. Es wäre vielleicht echt, ich mein, das sieht ja aus, wie ein Button, warum kann man nicht einen Button machen? Und selbst Mouseless Browsing kann damit einfach nichts anfangen, weil, die Option gibt es da einfach nicht, das man auch Grafiken ansteuern kann. Und wenn man jetzt uploaden könnte, wenn man auf diesen Button gekommen wäre, ja, würde man diesen Layer sehen, um etwas hochzuladen. Aber der Tastaturnutzer sieht ja das gar nicht. Und das ist auch so ein Problem. Es gibt diverse Sachen, die über diese Layer geregelt werden. Aber die erhalten halt nie den Fokus. Man erwischt diesen Layer einfach nie. Man tabbt dann quasi hinter diesem Layer tabbt man durch. Und weil sehr viele andere Links auf der Webseite quasi so auf On-Submit gemacht sind, schließt sich irgendwann der Layer einfach. Ich hab es wirklich versucht. Ich habe versucht irgendwie in diesen Layer zu kommen, aber es war einfach nicht möglich. Und da sage ich, da kann man auch wieder Standards nutzen.
Man kann einfach ein Layer Script von jQuery nehmen und da gibt es auch welche, die auf Tastaturbedienbarkeit irgendwie funktionieren. Da habe ich mal ein Beispiel ausgewählt hier in Popups. Das ist auch semantisch sehr schön gemacht. Ist auch sehr wenig Quellcode und da kann man wirklich zum Beispiel Layer einfach so ineinander schachteln und die kriegen auch immer schön einen Fokus. Das kann man hier sehen. (lacht) Ja Tastaturnutzung ist immer ein bisserl langsam, ne. (lacht) So das geht jetzt auf, ne. Und der Fokus ist direkt am ersten Element closed. Ne immer wieder gleich am ersten Element oben und dann kann man durchgehen. Ich mein, das ist ein bisschen jetzt, vom Beispiel her, ein bisschen blöd, wenn man es nicht abschicken kann oder so. Da muss man das wieder über Close schließen. Aber das fand ich dann schon sehr spannend, auch semantisch sehr, sehr sehr eng gemacht. Wirklich also es sieht sehr sauber aus. Das Problem ist, das funktioniert nicht im Screenreader. Da muss man halt auch so. Das ist das Problem, wenn man in der barrierefreien Arbeit was optimiert, muss man immer dran denken, okay die Tastatur klappt jetzt, ja, aber funktioniert das auch im Screenreader. Man muss einfach mehrere Dinge immer mitdenken. Und ich habe dann einfach ein bisschen rumgespielt. Man kann das aus dem sichtbaren Bereich rausschieben und schon ist der Fokus tatsächlich im Layer. Also das würde eigentlich ganz leicht gehen, ich weiß, nicht warum sie das nicht gemacht haben. Vielleicht schicke ich ihnen das mal. Und die zweite Überraschung war dann für mich von YUI weil mit dem Framework habe ich mich eigentlich noch gar nicht wirklich beschäftigt und das werde ich jetzt aber tun. Weil das ging sowohl im Screenreader gut, als auch in der Tastatur. Das ist auch so eine Form von Dialoglayer, können wir uns jetzt auch hier anschauen. (…) Tja, ups, macht er jetzt nicht mehr. Eigentlich schickt er es ab, normalerweise schickt er es ab, gut hat er jetzt nicht gemacht. Aber es ist klar, es funktioniert auch im Screenreader.
Der Screenreader ist auch sofort im Layer. Das ist wunderbar gemacht. Dann, mit was Yassu halt sehr stark wirbt, ist dieses, man sieht es ja auch am Layout oben, Select, Drag and Drop. Also: Auswählen des Podcasts, ne den Podcast in sein Yassu mit Drag an Drop hineinschieben. Ganz schwierige Geschichte, weil, es ist sehr schwer tastaturbedienbar normalerweise. Und das sehen wir uns jetzt kurz an. (…) Man packt sein Ö1 Journal packt das da rein, (...) man muss zur Güte sagen, man kann auch unten einen MyYassu Link klicken und dann wird es auch in den Podcast gepackt. Ich habe auch so Sachen versucht. Man kann Drag and Drop auch simulieren, indem man etwas kopiert und versucht darüber zu gehen und das irgendwie wieder hineinzuprinten. Aber man kommt ja in diesen rechten Bereich überhaupt nicht hinein. Also insofern kann man noch so viel kopieren, man kommt ja nicht hin. Und da habe ich einfach geguckt, gibt es ein schönes Beispiel, das sowohl per Maus als auch per Tastatur mit Drag an Drop funktioniert. Und von Opera fand ich das einfach schon ziemlich überzeugend. Und das funktioniert halt schon mit WAI-ARIA Man tabbt durch, dann wählt man aus mit Leertaste. Dann kann man einfach mit Pfeiltasten entscheiden, wo es hin soll. Und okay man muss natürlich das Konzept an sich verstanden haben, (lacht) wo es hin soll. Und, ja fand ich jetzt eigentlich gut, diese Möglichkeit. Und man kann es halt auch mit Maus bedienen. (...) Tja, bin ich jetzt zu schnell gewesen, wahrscheinlich, ne. (lacht) Mission Tabius beendet. Jetzt kommt der Abspann. Vielleicht kennt jemand 2001 und kennt diese psychodelische Frequenz. (lacht) (…) Tja, Dankeschön. (Applaus) (…) Tja, jetzt war ich aber arg schnell, oder? Okay.
Moderation Eric Eggert: Vielen Dank. Test, jawohl. Vielen Dank für den aufschlussreichen Vortrag. Ich hoffe, dass es jetzt noch ein paar Fragen gibt, weil, wir müssen noch ein bisschen Zeit schinden. Weil sonst gibt es keinen Kaffee. Ähm, also bitte fragen.
Person aus dem Publikum 1: Ich würde gerne wissen, wo kann man sich die Präsentation im Nachhinein noch anschauen? Die war sehr interessant, vielen Dank. Und ich würde mich da gerne noch mal einlesen.
Sylvia Egger: Ja klar. Ich weiß dass das extrem, ich hab ja nur 35 Minuten, ne. Und ich dachte ich könnte jetzt ins Detail gehen, oder ich versuch halt einfach mehrere Problemkreise aufzuzeigen. Und ich werde es versuchen reinzustellen. Das Problem ist das, ich habe das erste Mal wirklich mit Power Point so richtig gearbeitet und muss erst überlegen, ob das wirklich barrierefrei ist, gell. Aber ich werde es einfach mal ins SlideShare einstellen und versuchen das nachzuarbeiten, ne.
Person aus dem Publikum 1: Eric, stellt ihr das dann auch auf der A-Tag Seite online?
Moderation Eric Eggert: Also alle Vorträge, wenn ich das grade noch sagen darf, werden wieder, wie letztes Jahr auch, als Podcasts verfügbar sein, inklusive Transkription. Und auch die Materialien werden wir online stellen. Sowohl verlinkt auf SlideShare als auch, sofern die Vortragenden das wollen, auch in Originalformat.
Sylvia Egger: Und sonst Sprungmarker.de (lacht)
Moderation Eric Eggert: Genau sowieso immer. Sonst Sprungmarker.de
Person aus dem Publikum 2: Und die Google-Ads klicken ne?
Sylvia Egger: (lacht)
Person aus dem Publikum 2: Zum Thema Dialoge. Was die meisten Dialogergebnisse, die JavaScripts, die ich sehe, was sie vergessen ist, dass ein Dialog sich auch schließen muss, wenn man die Escape-Taste drückt. Und das ist ein generelles Problem, das viele Tastaturbedienungen in JavaScript nicht richtig gemacht werden, weil wir eben nicht wissen, wie Tastaturbedienung im normalen Operating System läuft. Das wir jetzt beispielsweise in einer Tabulator oder Lesereiter oder Reiterleiste, wie es im Deutschen heißt. Dass man eben mit der links und rechts Taste auch hin und her gehen muss, das vergessen die meisten Menschen und machen es nur mit Tab. Gibt es irgendeine, gibt es irgendein Dokument, das einem sagt, wo in Operating Systems wie die Tastaturbedienungen für solche Objekte sein müssen. Weil wir wollen es ja richtig machen, aber meistens haben wir die Information nicht.
Sylvia Egger: Da muss ich jetzt ehrlich passen. Also keine Ahnung müsste man nachrecherchieren.
Person aus dem Publikum 2: Oder eine Wiki erstellen.
Sylvia Egger: (lacht)
Moderation Eric Eggert: Also soweit ich weiß, gibt es sowohl von Microsoft als auch von Apple Dokumente Human Computer Interaction, irgendwie.
Person aus dem Publikum 3: Es gibt sowohl von Microsoft als auch von
Moderation Eric Eggert: Äh könnte man gerade auf das
Person aus dem Publikum 3: Sowohl bei Microsoft als auch bei Apple gibt es Richtlinien für User Interfaces für das Betriebssystem. Genauso auch für Gnom, also für den Desktop von Linux. Und da kann man sich genauer durchlesen halt, welche Elemente zu der Bedienung für irgendwelche, ja Tastaturbedienung oder sonst irgendwas benötigt werden und wie sie reagieren, müssen auch. Wobei es da sehr unterschiedliche Ansätze gibt. Das muss ich schon sagen. Also zwischen Apple und Microsoft gibt es sehr wohl divergierende Meinungen. Für eine muss man sich dann halt bei JavaScript entscheiden.
Moderation Eric Eggert: Vielen Dank.
Person aus dem Publikum 4: Ich nehme gleich das Mikro. Wir sammeln gerade diese Daten für WAI-ARIA, für das Accessible Rich Internet Applications. Aber, ja die sind teilweise sehr widersprüchlich manchmal. Und auf verschiedenen Betriebssystemen. Aber die Idee ist, dass wir das versuchen zu sammeln. Aber die Idee von einem Wiki, Christian, ist sehr interessant und, ja wir sollten vielleicht da was überlegen.
Moderation Eric Eggert: Okay, weitere Fragen, Anmerkungen?
Person aus dem Publikum 5: Ja, eine eher untechnischere Frage: Gibt es auch sozusagen, Gegenbeispiele? Best Practice Lösungen, wo jetzt Podcastangebote vorbildhaft eingebunden sind von der Barrierefreiheit und von der Tastaturbedienbarkeit? Wo man das auch Leuten empfehlen kann?
Sylvia Egger: Tja, das wäre so eine Sache. Also ich nutze ja quasi Webangebote dahin gehend gar nicht. Ich war überrascht, dass es das überhaupt gibt, ne. Aber angeblich ist es bekannt, ne. Also ich war auch überrascht. Ähm, ich denke, die Schwierigkeit ist dass all die Angebote mit so Sekundärmaterial arbeiten, ne. Also wenn du dir halt Sachen reinholst, die selber diese Angebote nicht haben, dann hast du halte keine Untertitelungen, dann hast du keine Audiobeschreibungen für die Videos, ne. Also das ist ja quasi ein Sekundärdienstleister. Und da weiß ich auch nicht, wie man da, wo man da überhaupt angreifen soll. Da bin ich mattgesetzt.
Person aus dem Publikum 5: Ich hab mir gedacht, vielleicht gibt es auch sozusagen irgendwen, der das ausprobiert hat und und.
Sylvia Egger: Nein also ich hab jetzt tatsächlich mich nicht speziell mit Podcastdiensten beschäftigt, sondern ich habe mir eine Auswahl von Start-ups einfach angesehen und fand halt des am schlimmsten. Und man konnte auch da am meisten Fehlerquellen einfach aufzeigen. Weil es hieß ja, ich soll hier versuchen ähm einfach so neuralgische Punkte aufzumachen und zu gucken, gibt es jetzt eben so Drag and Drop, gibt es eine Variante, die auch tastaturbedienbar ist und so. Also das habe ich ja versucht. Aber ich habe mich jetzt nicht in die Podcastszene versenkt, ne. (lacht) Da muss ich passen.
Person aus dem Publikum 5: Ja, aber ich glaube Podcasts sind für Tastaturbenutzerinnen interessant, ne.
Sylvia Egger: Ja aber ich mein, wenn man den JW-Player nutzt, dann kann man ja tatsächlich da rein gehen und auch was damit machen, ne. Also ich weiß nicht, ich hab versucht zu eruieren, was das für ein Player ist, es war mir ein Rätsel. Also ich weiß nicht, auf welcher Grundlage der arbeitet. Vielleicht ist es auch eine Form von Eigenproduktion. Würde ich jetzt mal tippen. So sieht die ganze Seite ein bisschen aus.
Moderation Eric Eggert: Okay danke. Da hinten war noch eine Frage, da in der Mitte. Bitte auf das Mikrofon warten, weil, das hört man hier überhaupt nicht. Danke.
Person aus dem Publikum 6: Ich wollte nur kurz was ergänzen zum JW-Player, weil der öfters gefallen ist. Also wir verwenden den recht stark momentan, haben ihn recht stark im Einsatz. Und der hat schon relativ gute Fähigkeiten im Bereich Accessibility, sind wir der Meinung. Es hat ein neues Caption Plug-in, ein Audio-Description Plug-in und ist auch hat eine sehr gute JavaScript-API, wo man sozusagen von außen quasi die Funktionen ansteuern kann. Also wir sind sehr zufrieden damit. Also als Tipp vielleicht für Leute denen es ähnlich geht, weil er die WCAG 2.0 sehr stark in diese Richtung gehen?
Sylvia Egger: Das ist jetzt falsch angekommen. Also ich nutz den ohnehin auch seit Jahren. Also ich kann den nur empfehlen. Das ist jetzt wirklich falsch angekommen. Das war schon quasi ich war schon argumentativ einen Sprung weiter, ja. Also wenn man halt verfolgt, wie der JW-Player sich weiterentwickelt hat, merkt man halt, seit er in Longtail, in so einem Videoportal ist, ja sind andere Plug-ins halt wichtiger. Das virale Element, das Werbeelement, ne. So richtig Spoiling, ja. Und Barrierefreiheit ist halt tatsächlich outgesourced in zwei Plug-ins. Zuerst war es ein Einziges, jetzt sind es zwei. Eine für Untertitelung, eine für Audiobeschreibung. Und ähm ich finde ähm also muss teilweise wirklich den Schwank verwenden, die aktuellste Entwicklung, um tatsächlich immer alle Möglichkeiten zu haben. Zum Beispiel die Playlist muss ja auch so sein. Jedes Element der Playlist muss die Möglichkeit haben der Untertitelung zu haben und eine Audiobeschreibung. Das ging zum Beispiel vor ein paar Monaten nicht, ja. Deswegen habe ich dem Kunden die Playlist wieder ausreden müssen, ja. Also es geht einfach darum, dass ich spüre, dass der JW-Player tatsächlich in eine andere Richtung geht. Und das ist jetzt einfach nur eine persönliche Meinung von mir. Und deswegen war ich halt überrascht, dass der Flow-Player offensichtlich jetzt von diesem werbetechnischen und spoiling tatsächlich jetzt versucht ein bisschen in die barrierefreie Richtung zu gehen und deswegen kann man sich den ruhig auch einfach mal anschauen. Das war mein Argument gewesen. Ich wollte nicht sagen, dass ich den JW-Player nicht empfehlen würde. Absolute Empfehlung.
Person aus dem Publikum 6: Nur ein Detail zum JW-Player Silvia, weil, es glaube ich schon dazu passt. Deine Probleme oder die von dir angesprochenen Probleme mit der schlechter werdenden Barrierefreiheit könnten an dem Skin liegen. Irgendwie greifen die Skins in den Player selbst ein. Ich hab das auch festgestellt. Du kannst eigentlich nur den Original-Skin verwenden.
Sylvia Egger: Ja, aber ich hab den Original Skin verwendet.
Person aus dem Publikum 6: Und sobald du irgendeinen anderen Skin
Sylvia Egger: Ja das kommt noch hinzu.
Person aus dem Publikum 6: einbindest, dann ist es ganz aus mit Plug-ins und mit Barrierefreiheit.
Sylvia Egger: Ja weil diese anderen Skin-Möglichkeiten nicht oft diese Sachen überhaupt zulassen. Du kannst in dem Skin teilweise überhaupt keine Untertitelung Button einbinden und so Geschichten, ne. Das ist halt wieder der Skriptentwickler, der da halt wieder keine Rücksicht drauf nimmt, ne.
Person aus dem Publikum 7: Ich hab noch eine organisatorische Bitte. Vielleicht, wenn die Diskussion noch weiterhin so angeregt sein wird, was wir ja hoffen, dass vielleicht jeder, der das Mikrofon in die Hand nimmt, seinen Namen dazu sagt. Es ist leichter hintereinander zu sprechen. Okay.
Moderation Eric Eggert: Ja, gute Anmerkung. Weitere Fragen, Hinweise, vielleicht noch eine Filmkritik?
Sylvia Egger: Ein super Film.
Moderation Eric Eggert: Wenn nicht, dann würde ich Sie bitten, da hinten den Ausgang zu nehmen und unsere Aussteller zu besuchen im kleineren Raum. Es gibt dann auch zur Belohnung Kaffee.
(Applaus)
Bilder von Karola Riegler. Intro von Derek K. Miller.
Tags:
Sylvia Egger