Sinnvoller JavaScript-Einsatz

Welche Aufgabe nimmt JavaScript im Webdesign ein?

Die Aufgabe und der Zweck von JavaScript ist nicht ein für alle Mal festgelegt, sondern hat sich im Laufe der Zeit immer wieder gewandelt. Dazu tragen Dokumentationen, Fachartikel und Scripte bei, die ein bestimmtes Verständnis von JavaScript verbreiten. Die Verwendung von JavaScript ist nie eindeutig positiv oder eindeutig negativ zu sehen. Heute gibt es keine einheitliche Auffassung davon, wozu JavaScript überhaupt gut sein soll und wann es besser vermieden werden sollte.

JavaScript blickt auf eine düstere Vergangenheit zurück, in der die Sprache vor allem für unnütze Spielereien, bedeutungslose »Dynamik« oder sogar zur Gängelung der Anwender missbraucht wurde. Anstatt Inhalte einfacher zugänglich zu machen, erschwerten oder verhinderten manche Scripte den Zugang. Dadurch haftete JavaScript lange Zeit ein zweifelhafter Ruf an.

Bis vor einigen Jahren verlief der JavaScript-Gebrauch weitgehend ungelenkt und es fehlte ein theoretischer Unterbau, der die sinnvolle Anwendung von JavaScript begründete. Es gab bereits einfache Faustregeln darüber, wann und wie JavaScript eingesetzt werden sollte: JavaScript sei nur ein optionaler, das heißt weglassbarer Zusatz, der die Bedienung vereinfachen und die Benutzerfreundlichkeit steigern soll. Daran hielten sich allerdings nur wenige Webautoren. Auch fehlte eine allgemeine Theorie, die die Rolle von JavaScript im Webdesign bestimmte.

Fest steht, dass die gezielte Aufwertung von Webseiten mit JavaScript die Bedienung maßgeblich verbessern kann. In diesem Abschnitt sollen die Voraussetzungen dafür untersucht werden. Die vorgestellten Theorien sind nicht der Weisheit letzter Schluss, sondern lediglich der aktuelle Stand einer Debatte, die sich stets weiterentwickelt.

Das Schichtenmodell und die Verhaltens-Schicht

Im Zuge der sogenannten Webstandards-Bewegung setzen sich viele Webentwickler für einen sinnvollen und korrekten Einsatz der Webtechniken HTML und CSS ein. Das Ziel waren inhaltsreiche, barrierefreie und anpassungsfähige Websites. In diesem Zusammenhang wurden die Grundlagen für modernes JavaScript erarbeitet, wie etwa die Trennung von Struktur und Layout.

Während der HTML- und CSS-Gebrauch zu dieser Zeit revolutioniert wurde, blieb JavaScript lange Zeit ausgeklammert. Erst ab dem Jahre 2004 machten sich einige aus der Webstandards-Bewegung daran, auch JavaScript einen neuen Sinn zu verleihen und den »richtigen« JavaScript-Gebrauch zu erforschen. Heraus kam das sogenannte Schichtenmodell, das den drei Webtechniken HTML, CSS und JavaScript gewisse Funktionen zuweist und sie aufeinander aufbauen lässt.

Wir haben bereits in der Einleitung besprochen, dass modernes Webdesign den strukturierten Inhalt (Text mit HTML-Auszeichnungen) von der Präsentationslogik trennt: Die Informationen zur Präsentation werden aus dem Markup in ein zentrales CSS-Stylesheet ausgelagert. Das Stylesheet baut auf dem Markup auf und ergänzt es – das HTML-Dokument soll aber auch ohne das Stylesheet möglichst zugänglich sein.

So ensteht das Schichtenmodell: HTML bietet die grundlegende Schicht, darüber liegt die CSS-Schicht. Im Code sind beide Schichten voneinander getrennt, um optimale Wartbarkeit, Ausbaubarkeit und Flexibilität zu gewährleisten. Dieses Modell lässt sich zunächst in einem einfachen Diagramm veranschaulichen:

Der Clou ist nun, JavaScript ebenfalls als eine solche Schicht zu begreifen, genannt Behaviour Layer, zu deutsch Verhaltens-Schicht.

Mit »Verhalten« ist Interaktivität gemeint: Wenn der Anwender etwas tut, bringt JavaScript die Webseite dazu, sich in einer bestimmten Weise zu verhalten. Wie CSS fügt JavaScript dem Dokument einen besonderen Mehrwert hinzu. CSS und JavaScript sollen mit dem Ziel eingesetzt werden, die Benutzbarkeit zu verbessern.

Die drei Schichten HTML, CSS und JavaScript arbeiten Hand in Hand, aber außer der HTML-Schicht ist keine für das grundlegende Funktionieren notwendig. Insbesondere funktioniert die Präsentation auch dann, wenn JavaScript nicht zur Verfügung steht. Das »Verhalten« funktioniert seinerseits soweit wie möglich, wenn das Stylesheet nicht angewendet wird. Damit hat man z.B. sehbehinderte Anwender mit Screenreadern im Kopf.

Wenn HTML die Basis bildet und die Zusätze CSS und JavaScript wegfallen können, gibt es vier verschiedene Kombinationsmöglichkeiten. Das folgende Schaubild schildert die die vier Fälle, die berücksichtigt werden sollten:

(Die Grafik wurde übernommen aus dem Webstandards-Workshop von Russ Weakley.)

TODO: Übersetzung

Schrittweise Verbesserung und Abwärtskompatibilität

Dieses Schichtenmodell definiert JavaScript als optionale Erweiterung – mit allen Konsequenzen für das Webdesign. Zwar ist der Fall am häufigsten, dass sowohl das Stylesheet als auch JavaScripte umgesetzt werden. Aber die Website muss immer noch funktionieren, wenn der Browser diese nicht, nur unvollständig oder gar eigenwillig umsetzt.

Dahinter steckt ein allgemeines technisches Modell namens Progressive Enhancement (zu deutsch in etwa: schrittweise Verbesserung). Man startet auf einer einfachen, grundlegenden Ebene, in diesem Fall HTML. Schritt für Schritt fügt man weitere Bausteine hinzu, die die Attraktivität der Webseite erhöhen: Stylesheets, Grafiken, Scripte, eventuell Animationen, Flash-Filme, Java-Applets, Multimedia-Dateien usw. Entscheidend ist, dass beliebig hoch gebaut werden kann, aber die minimalen Eingangsvoraussetzungen gleich bleiben.

Unterstützt ein Client-Rechner also nur bestimmte Teiltechniken, bekommt der Anwender soviel wie möglich zu sehen. Damit wird garantiert, dass jeder Anwender die Website zumindest rudimentär nutzen kann und der wichtige Inhalt für automatisierte Programmme wie z.B. Suchmaschinen-Crawler zugänglich bleibt.

Unaufdringliches JavaScript (Unobtrusive JavaScript)

Eine Weiterführung des Schichtenmodells stellt das Konzept Unobtrusive JavaScript dar. Dabei handelt es sich um einen Regelkatalog für eine vorteilhafte JavaScript-Anwendung. »Unobtrusive« bedeutet unaufdringlich, unauffällig und dezent. Das Wort wird in diesem Zusammenhang aber auch mit »barrierefrei« übersetzt.

Die Kernidee hinter unaufdringlichem JavaScript ist Zurückhaltung und Vorsicht. Viele der Regeln haben wir bereits kennengelernt:

Wie sich diese Regeln in der Praxis umsetzen lassen, werden wir später noch erfahren.

Besonderheiten bei Webanwendungen (Ajax)

Das einfache Credo, JavaScript nur als nützliche, aber weglassbare Zusatzschicht zu verwenden, hatte solange Bestand, wie JavaScript zu nichts anderem fähig war, als »statische« HTML-Dokumente mit ein wenig Interaktivität aufzumotzen. Dies hat sich in den letzten Jahren schlagartig geändert mit dem Aufkommen von sogenannten Webanwendungen, bei denen JavaScript die Hauptrolle spielt und die ohne JavaScript überhaupt nicht möglich wären. Das Zauberwort, dass diese JavaScript-Offensive einleitete, lautet Ajax.

Was unter Ajax zu verstehen ist und wie die neuen Webanwendungen aufgebaut sind, nimmt das Kapitel Serverkommunikation und dynamische Webanwendungen genauer unter die Lupe. An dieser Stelle sei nur angemerkt, dass JavaScript dabei nicht mehr bloß auf Basis klassischer HTML-Dokumente mit abwärtskompatiblen Textinhalten operiert. Stattdessen stellt die Script-Logik die gesamte Funktionalität zur Verfügung.

Das bedeutet: Nimmt man die Scripte weg, bleibt ein unbrauchbares Gerüst übrig, und es wird selten eine Alternative angeboten. Aus Sicht der genannten Auffasungen vom sinnvollen JavaScript-Einsatz ist das der absolute Albtraum. Und doch genießen solche hochdynamischen Webanwendungen eine ungeheure Popularität und vereinfachen die Arbeit im Netz, sodass niemand die Berechtigung dieses JavaScript-Einsatzes bezweifelt.

Dennoch darf man aus dem Ajax-Boom nicht die Konsequenz ziehen, die bisherigen Richtlinien über Bord zu werfen und JavaScript als selbstverständliche Zugangsvoraussetzung für alle möglichen Websites erklären. Klassische Websites und auch stark interaktive Webanwendungen können mit »unaufdringlichem« JavaScript nennenswert verbessert werden, ohne dass Zugänglichkeit und Kompatibilität dabei zu kurz kommen. Gleichzeitig macht es in manchen Fällen Sinn, JavaScript und gewisse Browser-Fähigkeiten zwingend vorauszusetzen. Aber auch Webanwendungen, die ohne JavaScript nicht auskommen, können eine abwärtskompatible Alternativ-Version bereitstellen, um die Zugänglichkeit zu gewährleisten.

Zugänglichkeit und Barrierefreiheit

Anders als landläufig vermutet wird, nutzen gerade Menschen mit Behinderungen verstärkt das World Wide Web. Barrierefreiheit soll gewährleisten, dass Behinderte eine Webseite möglichst problemlos lesen und bedienen können. Die Barrierefreiheit berücksichtigt sowohl die körperlichen und geistigen Besonderheiten der Webnutzer als auch die Anforderungen der verwendeten Web-Zugangstechniken. Ziel ist es, dass die Zugänglichkeit der Webseite in möglichst allen Fällen gewährleistet ist.

Ein prägnantes Beispiel ist der stark sehbehinderte oder sogar blinde Web-Nutzer, der eine Webseite mithilfe eines sogenannten Screenreaders liest. Ein Screenreader ist ein Zusatzprogramm, das Web-Inhalte mittels Sprachausgabe vorliest oder sie über eine sogenannte Braille-Zeile ertastbar macht. Ein weniger extremes Beispiel ist ein älterer Mensch, der von der Unübersichtlichkeit und der kleinen Schrift einer Webseite überfordert ist. Gemäß einer erweiterten Definition ist es auch eine Frage der Zugänglichkeit, ob eine Website über ein Mobiltelefon bedient werden kann und ob ein sogenannter Web-Crawler – ein automatisches Indizierungsprogramm einer Web-Suchmaschine – zu den Inhalten vordringen kann.

Der maßgebliche Standard, der Kriterien und Prüfverfahren für eine barrierefreie Website festlegt, heißt Web Content Accessibility Guidelines (engl. Zugänglichkeits-Richtlinien für Web-Inhalte, abgekürzt WCAG). Die Richtlinien liegen in Version 2 vor und werden vom World-Wide-Web-Konsortium (W3C) herausgegeben.

Bei Webauftritten der öffentlichen Verwaltung ist Barrierefreiheit in vielen Ländern gesetzliche Pflicht, aber auch Organisationen und Unternehmen sehen die Barrierefreiheit zunehmend als Erfordernis. In Deutschland regelt die Barrierefreie Informationstechnik-Verordnung (BITV) auf Bundes- und Länderebene die Anforderungen an öffentliche Websites.

Der Effekt von JavaScript auf die Zugänglichkeit ist nicht einfach positiv oder negativ zu bewerten. Festzuhalten ist, dass JavaScript schwerwiegende Zugangsbarrieren aufbauen kann. Leider gibt es keine einfachen Regeln, um Barrieren bei den üblichen JavaScript-Anwendungen zu vermeiden, und die Auswirkung des exzessiven JavaScript-Gebrauchs ist nur in Ansätzen erforscht.

In der JavaScript-Entwicklung haben wir meist folgende Situation vor Auge: Ein Anwender sitzt vor einem leistungsstarken Desktop-Rechner mit hochentwickeltem Browser und exzellenten JavaScript-Fähigkeiten. Er nimmt die Webseite über einen großen, hochauflösenden Bildschirm wahr und bedient den Rechner gekonnt mit Tastatur und einer Maus. Er findet sich auf einer Website sofort zurecht, kann schnell in ihr navigieren und Text, grafische und Multimedia-Inhalte wahrnehmen. – Dies ist aus Sicht der Barrierefreiheit bloß ein Idealfall. Faktisch nutzen Menschen zahlreiche Zugangstechniken, um Webseiten zu betrachten, und haben individuelle Fähigkeiten und Bedürfnisse. Der Barrierefreiheit geht es darum, Webseiten so zu entwickeln, dass sie dieser Vielfalt gerecht werden.

JavaScript lebt davon, auf Benutzereingaben zu reagieren, Änderungen an Inhalt und Darstellung des Dokuments vorzunehmen und somit in Interaktion mit dem Anwender zu treten. All diese Schritte der JavaScript-Programmierung stehen in Frage, wenn man alternative Zugangstechniken und Benutzereigenheiten berücksichtigt: Beispielsweise ein Screenreader wird oft alleine mit der Tastatur bedient, Änderungen am Dokument bekommt ein Screenreader-Nutzer nicht unbedingt mit und die Interaktion müsste völlig anders ablaufen, um ihn zu erreichen.

Diese Problematik soll hier nur angerissen werden. ... TODO

Empfehlungen und Leitlinien für die Praxis

Wir haben mehrere Modelle betrachtet, die uns bei der Entscheidung helfen können, wann und wie JavaScript sinnvoll einzusetzen ist. Webanwendungen haben wir als berechtigte Ausnahmen wahrgenommen, die die allgemeine Regel eher bestätigen. Sie können sich von diesen Grundregeln leiten lassen:

Was das alles konkret bedeutet, mag Ihnen noch schleierhaft erscheinen - das ist nicht schlimm, die Ratschläge sollen bloß eine grobe Orientierung bieten. Sie werden mit zunehmender Erfahrung lernen, mit welchen Methoden diese Anforderungen zu bewerkstelligen sind.