Das Event der Ausgrenzer

This post is also available in: English (Englisch)

Der Browserkontext bietet uns Webentwicklern schon eine Menge toller Sachen. Wir müssen uns nicht darum kümmern, wie der Text angezeigt wird, wir bekommen umfangreiche Informationen über das anzeigende Gerät, auf deren Basis wir unseren Benutzern unterschiedliche Layouts darstellen können. Und wir erhalten über Events und Pseudoklassen die Möglichkeit, Interaktionen mit unseren Seiten anzubieten. Doch eines ist besonders beliebt – und wird dabei so oft zum Nummer-Eins-Ausgrenzfaktor: MouseOver.

An sich ist auch MouseOver (oder :hover, um auch die CSS-Variante nicht unangesprochen zu lassen) ein wunderbares Event. Indem wir warten, bis ein Benutzer die Maus über ein Element hält, können wir ihm kontextrelevante Infos anbieten. Wollen wir auch, denn so ist der Bildschirm immer schön aufgeräumt. Wollen wir auch, denn so müssen wir unsere vierhundert Navigationsebenen nicht auf einmal anzeigen. Und wir wollen es auch, um unserern Besuchern zu zeigen, dass er irgendwo klicken kann, irgendwo anders hingegen nicht. MouseOver, Jäi!

Die Tapper

Aber Moment mal: Hat nicht im letzten Jahr so ein Vogel aus Cupertino viermilliausend solcher Geräte verkauft, die überhaupt keine Maus haben? Und ganz viele andere Vögel auch? Und was machen wir jetzt mit denen?

Tatsächlich haben haben wir jetzt ein ernsthaftes Problem. Keine Maus, kein MouseOver – soweit reicht einfache Logik. Jetzt hat zumindest Apple es auf den iOS-Geräten geschafft, trotzdem einen bestimmten Tap zu definieren, der dann als MouseOver interpretiert wird. Doch dieser Tap fordert zum einen eine gewisse Übung, zum anderen kommt das zugehörige MouseOut-Event erst zustande, wenn ein anderes Element den Focus erhält. Es lässt sich einfach nicht mit der entsprechenden Mausinteraktion vergleichen. Dazu kommt, dass vielleicht nicht alle Hersteller von Tablets so einen Freaktap implementieren.

Somit enthalten wir unsere wertvollen Kontextinfos und Navigationen all den Leuten vor, die mit Vorliebe mit ihren Fingern auf unserem Layout herumdrücken wollen. Und das werden von Jahr zu Jahr nicht gerade weniger. Dabei bietet doch gerade die neue Touchologie immenses Potential für kreative Neuansätze, die mit unseren klassischen Layouts zusammenleben können – Ich denke da an Pinch-Gesten, die die zweite Menüebene aufpoppen lassen, oder an einen – zunächst leeren – Info-Kasten, in den ich bestimmte, farbig markierte Stichwörter hineinziehen kann, um relevante Kontextinfos zu erhalten. Das umzusetzen sollte, dank zahlreicher hervorragender JS-Bibliotheken, machbar sein und bringt ein ganz neues Erlebnis in die Griffel unseres tappenden Besucherkreises. Und wer das nicht kann, mag oder will, sollte zumindest ein Layout bauen, das nicht auf Hover-Events angewiesen ist. Das erfordert kein komplettes Konzept für eine Mobile-Version der Seite, sondern lediglich einen rational gesteuerten Layoutprozess.

Die Tipper

Doch nicht nur unsere hippen Fallobst-Freunde vergraulen wir mit MouseOver-Exzessen. Nein, es gibt auch noch die zahlreichen Menschen, die uns unter Benutzung ihrer Tastatur beehren. Sei es wegen einer Einschränkung ihrer motorischen Fähigkeiten oder weil sie damit effizienter arbeiten zu glauben – jeder hat es verdient, unseren sicherlich herausragenden Content zu betrachten. Diese Leute benutzen möglicherweise die Tabulatoren-Taste, um in unserem Dokument von Link zu Link hüpfen. Dabei wird kein MouseOver-Event ausgelöst; etwaige Kontext-Informationen bleiben also in den Tiefen des CSS-Hidens verborgen. Daher schlägt Usability-Experte Roger Johansson vor, mit einer :hover-Anweisung immer auch den :focus einhergehen zu lassen (Analog gilt das natürlich für die entsprechenden JavaScript-Events). Dieses wird ausgelöst, wenn ein dafür geeignetes Element den Tastaturfocus erhält. Zu diesen Elementen zählen neben Links im Wesentlichen alle Formularelemente; einfache Textelemente hingegen nicht – ein Umstand, der diese als Interaktionsträger im Wesentlichen unbrauchbar macht.

Kurz gesagt

Keine Maus – Kein MouseOver. Sollen auch die Tapper und Tipper durch deine Seite navigieren können, kümmere dich darum.