28. Oktober 2008, von Maria Putzhuber
Mit Tastatur im Lazy Web
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('<a href="#" title="Bitte klicken, um Inhalt anzuzeigen"></a>')
.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.
Über dieses Blog
Am 28. Oktober 2008 um 17:15 Uhr
Vor dem Problem – was soll man nehmen – standen wir bei der Schlichtungsdatenbank auch. Geworden ist es auch was von der YUI, weil die wirklich gut ist und auch die Zugänglichkeit dort ein Thema ist. (Allerdings musste trotzdem etwas leicht verändert werden)
Am 29. Oktober 2008 um 13:50 Uhr
@ allerdings musste trotzdem etwas leicht verändert werden: gut, da müssen wir unseren berufsstand nicht abschaffen.
tabelle ist super! bemerken eigentlich alle eure besucherInnen, dass sie die einträge sortieren können? wär schad um die mühe.
Am 29. Oktober 2008 um 15:47 Uhr
Zur Schlichtungsdatenbank auf BIZEPS
@Maria:
Die Bemerkung, ob jemand die Sortierfunktion bemerkt, find ich ja jetzt aus eigener Erfahrung dazu sehr treffend.
@Martin:
Da ich aus Effizienzgründen (Ladegeschwindigkeit, keine Werbebanner sehen will, etc.) prinzipiell mit NoScript-Extension unterwegs bin, habe ich noch nie mitbekommen, dass Eure Liste auch sortierbar wäre. Und ich habe da jetzt schon ein paar Mal reingeschaut.
Da wäre (bei ausgeschaltetem JS) ein Hinweis in kleiner Schrift gleich unter der Überschrift sehr wertvoll, dass die Liste (mit eingeschaltetem JS) sortierbar ist.
Ich bin immer erstaunt, wie Usability-Erlebnisse zustande kommen. Ich selbst hätte nämlich wahrscheinlich auch keine Notwendigkeit gesehen, extra auf eine Sortierfunktion hinzuweisen.
Am 29. Oktober 2008 um 16:09 Uhr
@gerald ah, so a freud: der ominöse user ohne javascript hat ein gesicht. du also bist die 0,1-5% unserer leserInnen, die javascript deaktiviert haben.
Am 29. Oktober 2008 um 16:30 Uhr
@gerald noch eins: die BIZEPS schlichtungsdatenbank ist ein wunderbares beispiel für unaufdringlichen javascript einsatz. dir muss mans also nicht sagen, denn dir ist überhaupt nichts abgegangen.
aber für die, die ein kleines sortierpfeilchen leicht übersehen, aber gerne klicken würden, wenn sie wüßten wo, wäre ein hinweis sicher nützlich.
Am 29. Oktober 2008 um 16:33 Uhr
@Maria:
Reingefallen. MAIN habe ich vor einiger Zeit schon auf die “Whitelist” gesetzt, weils da sowieso keine blinkenden Banner und sonstige Widgets gibt. (Bei BIZEPS hab ich das im Übrigen jetzt auch gemacht.)
Musst also über die 0,1% JS-Abstinentler weiter spekulieren.