Mit Tastatur im Lazy Web

Maria Putzhuber — Tue, 28 Oct 2008 12:50:25 +0000

JavaScript Libraries und Frameworks sind großartig: Jquery, YUI, mootools, Prototype, scriptaculous, Dojo und wie sie alle heißen. Riesige Sammlungen von Scripts – fixfertig zum Gebrauch – für alles, was an einem Webseitchen cool und web2nullig aussieht. Und alles gratis! Die Einsteiger Tutorials suggerieren einem auch, dass man nicht einmal mehr JavaScript können muss, um damit klar zu kommen: ein Script herunterladen, und noch eines, von dem das andere abhängig ist, verlinken, aufrufen nach Kochrezept mit einer fein verkürzten Schreibweise, fertig.

Klingt bequem und stimmt natürlich nicht. Sobald kleinste Änderungen nötig sind, steht man da mit seinem Unwissen wir der Ochs vorm Stadeltor 2.0.

Aber lasst uns einmal faul und cool sein

Wir nehmen nun allerdings einmal an, dass wir sogar trotz Accessibility Fokus faul sein dürfen und mit copy und paste durchkommen. Wir suchen uns ein einfaches Accordion Script zur Probe aufs Exempel, dass barrierefrei auch hipp sein kann.

Ein Akkordeon ist ein Effekt, mit dem man Inhaltsteile platzsparend verstecken kann, mit einem Klick auf das Triggerelement, z.B. eine Überschrift, klappt der Inhalt auseinander wie ein Akkordeon, mit Klick auf die nächste Überschrift, klappt der eine Inhalt wieder zu und der nächste auf. Das ist Musik fürs Auge, geht vertikal und horizontal und eignet sich für Navigationen oder repetitiv strukturierte Inhalte wie FAQs ganz prächtig.

Der Plan für einen schnellen Tabparadenbeitrag

… ist nun folgender:

Wir googeln höchstens 20 Minuten nach dem idealen Akkordeon
Es muss tastaturbedienbar sein, d.h die Aufklappaktion muss an einem HTML Element hängen, das mit Tastatur ansteuerbar ist. Eine Headline ist das z.B. derzeit noch nicht.
Es muss unobtrusive sein – schönes Wort, das bedeutet, das Script legt sich unaufdringlich über den Rest der Website, bei deaktiviertem JavaScript sind im Fall Akkordeon alle Inhalte sichtbar und der Trigger ist nicht mehr klickbar.
Das Siegerscript binden wir fix hier ein, wir doktern nicht daran herum.

Wer suchet, der findet

Mit Tastatur auf den Websites der bekannten JavaScript Bibliotheken herumzusuchen, ist kein großer Spaß. Mit sichtbarem Tastatur Fokus haben die es nicht so. Mausmänner, haben wohl noch nicht ganz viele Gedanken an Accessibility verschwendet. Es ist sichtlich ein Männerspielplatz. Nur bei mootools mischen (auf den ersten Blick sichtbar) auch Frauen mit. Barrierefreier wirds dadurch noch nicht.

Falls sich Widerspruch von Leuten, die sich auskennen, regt: Wir sehen uns hier nur oberflächlich ein paar Scripts an, wie sie präsentiert und oft dann auch unangetastet verwendet werden. Sicher kann man alle anpassen, wie mans braucht, wenn mans kann.

Schnelles Google Ergebnis

Moofx – mootools oder Prototype

unobtrusiv: ja
tastaturbedienbar: nein

Stickman Labs – Accordion v2.0 – scriptaculous

unobtrusiv: ja
tastaturbedienbar: nein

Chris Esler – Moo Tools Accordion

unobtrusiv: ja
tastaturbedienbar: bedingt: mit Tastenkombinationen, wenn man sie weiß

Artviper – Mootools Accordion Menü

unobtrusiv: ja
tastaturbedienbar: schwierig, aber ja, weil Menülinks

Nyokiglitter – Mootools Accordion Menü

unobtrusiv: ja
tastaturbedienbar: ja in einer alten Version, weil Links

Bassistance – JQuery

unobtrusiv: ja
tastaturbedienbar: teilweise, Beispiele mit Links ohne href, mit “echten” Links, mit Buttons

Marco van Hylckama Vlieg – JQuery Menü

unobtrusiv: ja
tastaturbedienbar: ja, weil Links, aber schwierig, kein sichtbarer Tastaturfokus

Project Atomic – FAQ Accordion -JQuery

unobtrusiv: ja
tastaturbedienbar: bedingt, weil mit einem Link alles aufeinmal aufgeklappt werden kann, ansonsten Definitionlist

Marco van Hylckama Vlieg – YUI Menü

unobtrusiv: ja
tastaturbedienbar: ja, mit Pfeiltasten

Der schnelle Sieger ist also das YUI AccordionView Widget

Mit den Pfeiltasten können Sie die einzelnen Panels ansteuern, mit Enter öffnen.

Item 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum pellentesque. Nunc justo mauris, ultricies et, consequat ac, tristique congue, enim. Vestibulum tempor ultrices leo. Nam venenatis arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse facilisis bibendum mauris.
Item 2
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut eleifend dui accumsan lorem.
- Donec fermentum consectetuer purus.
- Curabitur bibendum elit a nibh.
- Curabitur fringilla velit sit amet diam.
- Proin bibendum orci eget ante.
Item 3

Morbi commodo dignissim odio. Donec ac velit id elit molestie consectetuer. Vivamus ac ligula sit amet mi aliquam accumsan. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam pede pede, convallis sit amet, condimentum a, accumsan tristique, tellus. In justo mi, interdum tempor, fermentum ut, porttitor at, lacus. Nulla lobortis commodo enim. Suspendisse varius auctor est. Phasellus sodales egestas leo.

Fazit

Sie haben völlig recht. Diese Herangehensweise ist unprofessionell. Natürlich muss man sich auskennen, um mit diesen Tools gut und mit Accessibility im Hinterkopf umgehen zu können.

In WordPress, das wir hier als Blogsoftware verwenden, sind JQuery und Scriptaculous bereits integriert. Es bietet sich also an, für hübsche Effekte auf deren Plugins zurückzugreifen. Dann laden die Seiten auch schneller, als es dieser Artikel gerade getan hat.
Auch dafür gibt es gute Tutorials, z.B. bei bueltge.de.

Nachtrag

Beim Drüber Nachdenken kommt mir das obige Plugin zu kompliziert vor. Das folgende jQuery Plugin scheint mir besser geeignet für den einfachen Effekt.

jQuery Accordion Plugin

jQuery ist auch nicht schlecht:

Oder sehen Sie hier irgendeinen Nachteil zum obigen, komplizierteren YUI Script?

Es ist schlank:

jQuery ist integriert in WordPress und das zusätzliche Accordeon Script hat 9kb.

Es ist einfach anzupassen:

Man kann beim Aufrufen ein paar Parameter angeben. Die Links wurden von mir dynamisch dazugefügt, dadurch wird das Akkordeon tastaturbedienbar. Ohne JavaScript gibt es auch keine überflüssigen Links. Das bisschen Styling kann man leicht selber machen, man braucht also kein zusätzliches CSS.

jQuery – einfacher slideToggle Effekt

jQuery ist gut:

Für eine einfache Slide Funktion benötigt man gar kein Plugin, nur ein paar Zeilen Code.

Es ist einfach:

Man muss kein JavaScript Guru sein, um diesen Code nachvollziehen zu können:
$('#jquerybeispiel2').find('p').hide().end().find('h4') .wrapInner('') .click(function(){ $(this).next().slideToggle("fast");return false;});

Es macht Spaß:

Einfache Effekte sind leicht zu bewerkstelligen. Aber es lohnt sich absolut, jQuery genauer zu lernen.

Tab Parade rollt

Beate Firlinger — Thu, 16 Oct 2008 10:16:40 +0000

Es war eigentlich nur so ein spontaner Gedanke. Jetzt setzen wir ihn um und starten die erste Tab Parade im weltweiten Web. Anlass ist der “Internationale Tag der Tastatur”, den Robert Lender am 15. Oktober 2007 erfunden hat, als bei unserer gemeinsamen Accessibility Blog Parade die Devise “Maus raus” ausgegeben wurde. Aus dem Tag wurden heuer gleich mehrere Wochen, in denen wir dazu anregen wollen, ohne Maus durchs Web zu tabben und Beiträge darüber zu schreiben.

Hinweise

Die Tab Parade läuft von 15. Oktober bis 25. November 2008. Viele Ideen und nützliche Infos dazu gibt es bei Robert Lender auf Nur ein Blog im Beitrag: Blog Parade zum Internationalen Tag der Tastatur.

Bei uns im MAIN_blog gibt es, wie versprochen, eine Tab Parade Roll, also eine Blogroll, in der wir – so wie auch im Twitter Feed Accessibility – laufend alle Beiträge sammeln und auflisten. Und obwohl wir diese kleine Webaktion bisher noch kaum beworben haben, sind auch bereits einige super Artikel zur Tab Parade beigesteuert worden.

Banner

Anders als von Robert angekündigt, gibt es jetzt auch ein Banner in zwei Größen zur Tab Parade 2008. Ich habe einfach schnell die alten Banner der Accessibility Blog Parade für aktuelle Zwecke rezykliert. Also, wer mag, kann Paradenbeiträge auch damit schmücken. Den Tag “tabparade” bitte jedenfalls verwenden. Danke gleich jetzt einmal an alle, die mit dieser Parade mittabben und mitbloggen.

Banner breit (GIF, Format: 468 x 60)

Banner quadratisch (GIF, Format: 150 x 150)

Tab und Enter

Maria Putzhuber — Mon, 13 Oct 2008 10:40:59 +0000

Der Robert Lender ist ein konsequenter Mann und will auch dieses Jahr wieder den „Internationalen Tag der Tastatur“ begehen, den er am 15. Oktober letzten Jahres ausgerufen hat. Wir schließen uns gerne an mit zwei kleinen Übungen zum Thema tastaturbedienbares JavaScript.
Lassen Sie also die Maus beiseite am 15. Oktober und tabben Sie sich durch den Tag. Die besonders Empathischen unter Ihnen – können auch Handschuhe anziehen oder versuchen, den Computer ohne Hände zu bedienen.

1. Dropdown Menüs

Für die Accessibility Hardcore Fraktion sind sie ein absolutes No-No – aus einer Menge guter Gründe. Das pragmatische Lager meint, wenn Sie sie nicht vermeiden können, machen Sie sie zumindestens richtig.

Hier nun eine Aufgabe speziell für MinisterialbeamtInnen und natürlich auch alle BürgerInnen, die sich sonst noch auf Ministeriumsseiten verirren. Vergleichen Sie die Dropdownmenüs auf der Website des Finanzministeriums und des Verteidigungsministeriums. Ohne Maus, wohlgemerkt! Welche Lösung ist aus Ihrer Sicht die richtigere? Kommentare herzlich willkommen.

2. JavaScript Widgets

Speziell für neugierige ProgrammiererInnen und alle Web 2.0 Zukunftsgläubigen die Aufgabe, sich durch die Website der Grünen zu bewegen – ohne Maus. Konzept und Design der Seite sind toll, an der barrierefreien Umsetzung wird noch etwas gefeilt, wie man hört.
Wo kommen Sie weiter, wo bleiben Sie stecken, wie programmiert mans richtig: das ist spannend, finden Sie nicht auch?

Am 15. Oktober machen Sie das bitte, nicht jetzt, jetzt könnten Sie den „Tag der Tastatur“ ebenfalls bewerben: Für ein besseres Web!

MAIN_web » tabparade