Manchmal möchte man Bereiche auf einer Webseite erst bei Bedarf anzeigen, die Seite soll erst einmal übersichtlich und aufgeräumt sein. Erst nach einem Klick sollen Details gezeigt werden.
Eine barrierefreie Lösung auf Basis von JavaScript beschreibe ich in diesem Artikel
Ich freue mich auf Kommentare - direkt im Artikel! (die Kommentarfunktion hier ist gesperrt).

Auswahllisten (Ausklapplisten / <select>) dienen dazu, dem Anwender eine Liste mit festen Einträgen anzubieten, aus der er einen Eintrag auswählen kann. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.
Zum Abschicken gibt es einen eigenen Button, z. B. <input type="submit” … >
Wenn nun das Formular als einziges Element eine Auswahlliste enthält (typisches Beispiel: ein Style Switcher), dann ist es lästig, den Submit Button anzusteuern und zu betätigen.
Pfiffiger wäre es, die Auswahl mit Enter bestätigen zu können.
Hier kommt Javascript mit dem Event Handler onchange zu Hilfe.
Beispiel:

<select name="titel" size="1" onchange="this.form.submit()" >

Wunderbar.
Aber:
Versuchen Sie mal, eine solchermaßen aufgepeppte Auswahlliste im Internet Explorer ohne Maus, also nur mit der Tastatur, zu bedienen. Ich habe für Ihre Versuche ein Muster zum Testen erstellt. Dieses Muster beinhaltet konsequenterweise keinen Submit Button. (In der Praxis würde ich den jedoch sicherheitshalber belassen.)
Und was passiert da? Es gelingt bei ausschließlicher Tastaturnutzung nicht, einen der angebotenen Einträge auszuwählen, weil das Formular sofort beim Versuch, innerhalb der Auswahlliste mit den Pfeiltasten nach unten zu gehen, abgeschickt wird. Dabei wird dann immer der zweite Eintrag in der Liste “Michael Jackson” gewählt.
Es sei denn, Sie wissen, wie man das mit dem Internet Explorer macht:

1. Mit der Tab Taste den Fokus auf die Auswahlliste setzen.
2. Die Auswahlliste mit “Alt+Pfeil nach unten” öffnen.
3. Mit den Pfeiltasten (nach unten / nach oben) innerhalb der ausgeklappten Liste navigieren.
4. Enter

Und jetzt die Preisfrage: Wer wusste das?

Mir jedenfalls ist das zu riskant. Ich befürchte, zu viele Besucher mit dieser Technik auszuschließen.
Ich werde also in der praktischen Anwendung dem Internet Explorer ein Formular ausliefern ohne den onchange event handler. (Das geht ja recht zuverlässig mit conditional comments.)

Nicht auszurotten ist der Glaube, Java und Javascript seien identisch.

Nun finde ich sogar ein Lerntutorial des Lehrstuhls für Nachrichtentechnik der Technischen Universität München das auf geradezu geniale Weise die beiden Begriffe durcheinander wirft:
http://www.lntwww.de/JavaAnleitung.html
Ich habe den Artikel nicht verlinkt, um nicht noch weitere Links auf diese - sicher gut gemeinte - Desinformationsseite zu setzen.

Gleich der erste Satz lautet:

Falls bei Ihnen noch kein Javascript installiert ist, laden Sie von http://www.java.com/de/download/manual.jsp das Javascript-Plugin der Firma “Sun Microsystems” herunter.

Und weiter:

Das Javascript-Plugin … wird folgendermaßen aktiviert:
Wählen Sie bei Windows in der Systemsteuerung das Symbol “Java Plug-In” aus.

Muss ich es wirklich sagen?
Es gibt kein Javascript-Plugin. Und gleich gar nicht von der Firma Sun Microsystems!

Ich habe die Autoren gebeten, diesen Artikel zu überarbeiten, und bin neugierig auf die Reaktion.

28.03.09:
Die Antwort ist da. Ich zitiere in Auszügen.

… dass nur von Javascript die Rede ist.
… Nur ein einziges Mal kommt JAVA vor, nämlich beim Link. Ich kann allerdings auch nichts dafür, dass die Website http://www.java.com heißt.
Das ist alleinig das Problem von SUN Microsystems, dem Hersteller.

Nein, ich wiederhole nicht, was die Firma Sun Microsystems herstellt, und auf der genannten Seite zum Download anbietet.
Aber ich wiederhole:
Java und Javascript haben nichts miteinander zu tun.

28.03.09 16:47 Uhr

Sehr geehrter Herr Weisshart,

habe die vermeintliche Seite nochmals überprüft und es handelt sich tatsächlich um eine sehr sehr veraltete und zudem fehlerhafte Beschreibung.

Habe diese Beschreibung von unserem Server genommen!!!

Mit freundlichen Grüßen,

Na also.

Haben Sie sich auch schon mal gefragt, warum Cross Site Scripting (XSS) so schlimm sein soll? Die gängigen XSS-Demos verunstalten Seiten oder geben seltsame Meldungen aus nicht gerade weltbewegend. Deshalb demonstriert dieser Artikel, wie XSS mit einfachsten Mitteln zum Beispiel Ihr Passwort klauen kann, während Sie es auf einer echten Login-Seite eingeben.

Der Artikel vom 10.08.2007 bei Heise
Eine böse Sache, die wirklich zum Nachdenken anregt. Vor allem das Fazit des Artikels:

Abhilfe? Das ist richtig schwierig! …

Sanftes Ein- und Ausblenden von Grafiken - und anderen Inhalten. Von Flash Animationen wohl bekannt, oder auch mit Hilfe von Java Applets.

Wer auf beide Techniken verzichten will, und im Netz nach alternativen Möglichkeiten sucht, stößt ganz schnell auf eine Javascript Technik namens nereidFade. Und als nächstes auf den Hinweis: "Grundsätzlich ist dieser Effekt nur mit dem Internet Explorer möglich."

Ich hab’ mir das Script mal vorgeknöpft, und für alle modernen Browser umgeschrieben. Und gleich noch mit einem horizontalen Autoscroll verbunden.
Zu sehen auf meiner aktuellen Spielwiese.

Achtung! DSL sollte schon sein. Die Seite ist wegen der eingebundenen Bilder 350 kB schwer.
Für die Nutzer langsamerer Internetanbindungen gibt es als Entschädigung ein kleines gimmick: Eine flash-like Ladeanzeige.

Wer sich für die Technik interessiert:
Das Ganze spielt sich in einem iframe ab: http://www.the-magics.de/fade_scroll.html. Der Quellcode ist ausreichend dokumentiert.

Geeignet ist diese Technik zur Präsentation einiger weniger Bilder, aber ganz bestimmt nicht als Fotoalbum.

Das Menü gehört mit zu den wichtigsten Komponenten einer Website. Kein Zweifel. Und deshalb befindet es sich auch immer oben, links oder rechts, auf jeden Fall aber »above the fold«, ist also ohne Scrollen sichtbar.
Nutzer von Screen Readern, PDAs und Handys, sowie Suchmaschinen sind diesbezüglich ganz anderer Meinung. Sie hätten gerne das Wichtigste, nämlich den Inhalt, zuerst.
Die Lösung, um Alle zu bedienen: Das Menü kommt im markup, im Quelltext, ans Ende, und wird per CSS in die linke oder rechte Navigationsspalte positioniert. Damit die oben erwähnten Nutzergruppen das Menü leicht erreichen, gibt es einen skip link ganz am Anfang der Seite, um das Menü direkt anzuspringen. Zu erreichen (zu sehen) ist dieser skip link mit der Tab-Taste.
Ich hab’ jetzt mal etwas anderes probiert: Auf dieser Seite bleibt die Navigation unten. Aus Designgründen.
Schön. Und gewagt. Wenn das Browserfenster des Besuchers, warum auch immer, so klein ist, dass er das Menü nur durch Scrollen erreicht? Ist das nicht irritierend?
Nein!
Denn in diesem Fall wird das Menü eben oben angezeigt.
Ich erreiche dies durch ein pfiffiges Javascript. Danke an SELFHTML
(Sollte Javascript nicht verfügbar sein, bleibt das Menü eben unten. Aber die Seite funktioniert weiterhin.)

Nachtrag: Hab’ ich eigentlich erwähnt, daß der IE das natürlich nicht kann?

Mehrzeilige Texteingabefelder in Formularen <textarea> sind auf den meisten Webseiten aus Designgründen viel zu klein. Häufig passen nur 5 oder 6 Zeilen in das Eingabefeld, dann erscheint ein Scrollbalken. Damit wird es äußerst unbequem, das Geschriebene zur Korrektur noch einmal zu lesen.
Safari-Nutzer können das Textfeld mit der Maus vergrößern, und Firefox-Nutzern steht eine gleichwertige Extension zur Verfügung, wie ich hier beschrieben habe.
Eine weitere, elegante Lösung habe ich kürzlich gefunden (ich weiß leider nicht mehr wo, dennoch danke an Unbekannt).
Mittels eines Javascript eventhandlers wird das Textfeld automatisch nach unten verlängert, sobald bei der Texteingabe die letzte sichtbare Zeile erreicht ist:

<textarea onkeyup="this.style.height=Math.max(this.scrollHeight,150) + ‘px’;this.style.overflow=’hidden’” …

Mit den 150 px Höhe muß man eventuell ein wenig experimentieren, um ein Springen der angezeigten Höhe zu vermeiden.
Diese Javascript-Lösung ist selbstverständlich unobtrusive, d. h. wenn Javascript nicht zur Verfügung steht, verhält sich das Texteingabefeld ganz normal, wie oben beschrieben.
Klar, dass ich das gleich hier mal probieren musste.

Edit 06.02.2008: Ein neuer Anlauf. Das Bildschirmflackern sollte behoben sein (siehe Kommentar). Und auch der Zurück-button funktioniert.
Über Rückmeldungen und Kommentare würde ich mich freuen.

Edit 3.2.2006: wegen eventueller Probleme mit der accessibilty (Flackern) und der usability (die Zurück - Funktionalität des Browsers geht nicht mehr) hab ich das sanfte Scrollen - schweren Herzens - vorläufig? wieder deaktiviert.
Den Beitrag hier lasse ich stehen: das tool ist einfach zu interessant.
weiterlesen…