< Der Dank des Tages geht an: Silvio | DVD-»Ersatz«: MKV mit Untertiteln >

25 Jun 2009 Zugänglichkeit »für Faulpelze«

Derzeit versuche ich, mein mangelndes Verständnis für Javascript zu kompensieren, indem ich mich mit jQuery anfreunde. Das klappt so weit auch ganz gut – jQuery, ein(e) Javascript-Bibliothek bzw. -Framework mit dem sympathischen Motto „Write less, do more“, erleichtert den Einstieg ungemein und nimmt dem Browserflüsterer vieles durch einfache Hilfsfunktionen und Automatismen ab.

Es macht – sehr simpel gesagt – Javascript einfacher; zugänglicher, wenn man es so sehen will.

Gerade für Einsteiger besonders verlockend an jQuery ist die enorme Auswahl an Plugins, Tutorials und Codebeispielen im Netz (nicht nur in den verlinkten offiziellen Quellen) – im Grunde oberflächlich betrachtet eine Mischung aus Baukastensystem und Selbstbedienungsladen, aus dem man sich quasi nur noch das rausfischen muss, was man selbst konkret benötigt.

Wäre da nicht der mitunter „gewöhnungsbedürftige“ Code, den manch Plugin einsetzt. Jens Grochtdeis hatte mich netterweise via twitter bereits „gewarnt“. Ein aufmerksamer Rundgang durch einschlägige Seiten bestätigt Jens' Warnung.

In vielen Codebeispielen sticht vor allem ein falsches Verständnis von Zugänglichkeit hervor. Ausdrücklich als „accessible“ beworbene Codeschnippsel verstehen darunter oftmals lediglich „funktioniert auch, wenn Javascript browserseitig deaktiviert ist“, was natürlich unfassbarer Unfug ist.

(In den übelsten Fällen – etwa bei Teilen der jQuery Tools, um die es im twitter-Dialog mit Jens konkret ging – gilt übrigens nicht mal das! Dort funktionieren beispielsweise die Tabs bei deaktiviertem Javascript gar nicht, die „hinten liegenden“ Tabs werden komplett ausgeblendet.)

Selbst einem Javascript-Neuling wie mir ist bereits klar, dass man stets die Grundregeln für zugängliches Javascript befolgen sollte – wobei das saubere Degradieren von Javascript (also eine Funktionsfähigkeit, eine Benutzbarkeit der Seite auch ohne aktiviertes Javascript) noch nicht einmal ausdrücklich eine Forderung in puncto Barrierefreiheit ist – eher eine Selbstverständlichkeit in Sachen Benutzerfreundlichkeit, auch wenn die Zeiten, in welchen Javascript als „böse“ galt, vorbei sind.

Mit „richtig“ zugänglichem Javascript verfeinerte Seiten lassen sich z.B. auch per Tastatur und/oder im Screenreader nutzen, natürlich inklusive der Teile der Seite, welche über Javascript erzeugt oder verändert wurden. Das ist mitunter durchaus mit Arbeit verbunden; oft ist es aus Sicht der optischen Gestaltung oder auch der Browserkompatibilität einfacher oder mit weniger Aufwand verbunden, etwa ein Weiterblättern in einer Diashow als click-Funktion an eine Hintergrundgrafik zu binden (wie etwa in diesem Beispiel). Dennoch ist die korrekte Auzeichnung dafür ein Link, welcher ja gerne durch eine passende Grafik ersetzt werden kann.

Als gutes Beispiel mag etwa der Code für zugängliche Tabs in jQuery von Dirk Ginader dienen – das, was dort geleistet wird, ist nicht mit einem eleganten Einzeiler machbar. Ich gestehe offen ein, dass ich als jQuery-Anfänger Dirks Code nach wie vor nicht vollständig verstehe. Aber er demonstriert recht deutlich, dass zugängliches Javascript weit mehr erforderlich macht als lediglich die oben erwähnte „Lösung für Faulpelze“.

Der „richtige“ Ansatz kann nur die als progressive enhancement bekannte Methode sein:

  1. Inhalte in semantisch korrektem (X)HTML auszeichnen
  2. Layout und Gestaltung über CSS
  3. Verhalten über unaufdringliches, sauber degradierendes Javascript

Das deckelt viele der möglichen Fehler bereits im Vorfeld. Vernünftig ausgezeichnetes, standardkonformes HTML würde etwa gebieten, dass wie oben erwähnt „einfach“ eine Hintergrundgrafik als Blätter„link“ einer Diashow verwendet würde.

Es sollte allerdings auch bei aller Kritik nicht verschwiegen werden, dass sich viele der „schlechten“ Codebeispiele mit etwas Mühe durchaus so hinbiegen lassen, dass der Code zugänglich und benutzerfreundlich wird – und das geht dann dank jQuery auch wieder relativ einfach. Ebenso gibt es durchaus Beispiele, die bereits sauberen Code abliefern – das allerdings ähnelt leider mitunter doch sehr der Suche nach der berüchtigten Nadel im sprichwörtlichen Heuhaufen …

0 Trackbacks

Trackback-URL

  1. No Trackbacks

1 Comment

RSS Feed (Comments) for this entry

  1. * Reinhard (05.07.09, 17:16):

    Dann dürfte dich diese Liste vielleicht interessieren:
    http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/

    Grüße
    ReinhardL

Add Comment

Please notice the comment directions.

Directions

Textile-formatting allowed
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
Gravatar, Twitter, Identica, Favatar author images supported.

Mandatory fields are marked with a *.

Comments including at least one link will be moderated. Comments including at least three links will be blocked. Sorry – spam protection.

Using noses in emoticons might lead to unexpected results in conjunction with Textile, especially in the middle of a sentence – please use :) or ;) etc. instead.