sprungmarker testet

sprungmarker extern: Im Rahmen der Sommeraktion der Webkrauts „Sonnenseiten“ habe ich nach einer Webseite gesucht, die eine gelungene Tastaturnavigation zu bieten hat.

Da der Blickwinkel der Aktion eindeutig darauf lag, ein Lob auszusprechen, habe ich mir wirklich die Tabulatortaste wund gedrückt, um eine einigermassen konsistente und gut realisierte Navigation mittels Tastatur zu finden. Ich hatte einige Kandidaten herausfiltern können, keiner hat mich wirklich überzeugt, aber für einen musste ich mich dennoch entscheiden: Zukunft Europa. Die Vorteile dieser Navigation habe ich in meiner sonnigen Rezension in einer etwas ungewohnteren essayistischen Form aufgearbeitet.

Da eine Sonnenseite nunmal sonnig zu sein hat, wurden die wenigen Schattenseiten ausgespart. Da aber in den Kommentaren durchaus auf diese Schattenseiten hingewiesen wurde, nutze ich hier das Terrain, um doch noch ein paar der Problemstellen zu benennen, weil sie auch signifikant für alle Kandidaten waren.

Accesskeys ja oder nein?

Accesskeys an sich sind ja nicht mehr wirklich en vogue. Ähnlich wie der TABINDEX werden Accesskeys nur noch gezielt und schmal eingesetzt. Wenn überhaupt, richtet man sich nach offiziellen Empfehlungen wie bei Hellbusch. Und auch dabei lässt sich immer noch eher abspecken, als alles davon einzusetzen.

Sieht man sich die Accesskey-Belegung hier an, fällt eine gewisse Eigenwilligkeit auf: So werden die Links schlicht einfach von 0 bis 4 durchnummeriert und die Belegung dabei entspricht wohl keiner Empfehlung, es sei denn, es gäbe eine österreichische Variante. 🙂 Ich lasse mich da gerne korrigieren.

Sprunglinks: was vergessen und was zuviel war

Sprunglinks sind die nächsten Kandidaten, neben Accesskeys und TABINDEX, die immer mehr in die Kritik geraten. Gerne werden sie mittlerweile durch eine stringente Überschriftenhierarchie ersetzt. Derzeit kann man aber immer noch beides einsetzen, sollte aber nicht zu üppig damit umgehen.

Das noch marginalste Problem ist hier, die etwas merkwürdige Benamung. Gut, Krümelpfad für Breadcrumb ist auch immer so ein wenig mit der Kneifzange übersetzt, aber Positionsanzeige klingt auch nicht viel besser. Man müsste mal wieder nachsehen, ob es da mittlerweile eine Einheitlichkeit gibt. 🙂

Dann haben wir zwar keine üppige Ansammlung von Sprunglinks, aber die Frage ist doch, ob der Sprung in den Breadcrumb notwendig ist. Auch der Sprung in das Submenü hält nicht, was er verspricht, weil nicht immer eine Unterebene für die Hauptnavigation vorliegt. Da hätte man stärker bei der Programmierung darauf achten sollen, das abzufangen. Rein von der logischen Abfolge ist es auch eher verwirrend, einen Link zum Untermenü anzubieten, obwohl am Start der Seite gar nicht klar ist, in welchem Hauptpunkt man sich befindet. Gut – ein möglicher Anhaltspunkt für den aktuellen Standort wäre der Inhalt des TITLE-Elements, das wohl eine Art rückwärtigen Breadcrumb anbietet.

Wenn man schon Sprunglinks einsetzt, sollten sie auch als Sprungmöglichkeiten nach allen Richtungen dienen. Was daher fehlt ist, der Sprung vom unteren Ende der Seite wieder nach oben, der Top-Link.

Formulare wurden vergessen

Die Hervorhebung bei der Tastaturnavigation ist bei etlichen Seiten in Bereichen wie Navigationen oder im Inhalt schon gut eingearbeitet, aber bei Formularen hapert es immer noch. Auch hier in unserem Beispiel gibt es keinerlei Fokus auf den Formularen. Gut man kann sich linear durchtabben, aber das ist schon alles. Dabei sind Formulare durchaus ein wesentlicher Teil des Inhalts und sollten den Tastaturnutzer – wir denken dabei auch noch an die Fehlervariante – nicht derart alleine lassen. Abgesehen davon – und dafür ist diese Seite wieder ein schönes Beispiel – sind die Formulare wieder DIE Stiefkinder des Webdesigns. 🙂

Aktive Bereiche und :focus

So sehr bei der Tastaturnavigation auf einen gut sichtbaren Fokus Wert gelegt wurde, wird leider der jeweils aktive Punkt gerne vernachlässigt. Hier wird dann eher nur auf eine Unterstreichung zurückgegriffen und auf eine zusätzliche farbliche Hervorhebung verzichtet. Dabei wäre das kein technisches Problem, der aktive Punkt wird in HTML jeweils immer extra codiert.

Alles gleich: :hover,:focus,:active

Ein ähnliches, unelegantes Vorgehen wird in den für die Tastaturnavigation wichtigen CSS-Pseudoselektoren sichtbar. Zwischen :hover,:focus und :active wird in der Gestaltung kaum ein Unterschied gemacht, die Selektoren werden auch gerne schlicht per CSS aneinandergereiht. Schade, man hätte hier noch stärker die unterschiedlichen Stadien der Aktivierung sichtbar machen können.

Lineare Reihenfolge: Wenige Probleme

Durchaus gut wird die lineare Reihenfolge ab- und eingearbeitet. Nur das Suchfeld steht ein wenig alleine da. In der linearen Abfolge würde es nach den Sprunglinks zu erwarten sein, aber wir gehen zuerst die ganze Hauptnavigation durch und dann springen wir wieder einen Schritt zurück und gelangen auf das Suchfeld, das leider auch kaum aktiven Fokus hat.

Fazit

Meine Kritik soll jetzt nicht so verstanden werden, dass ich kein gutes Haar an der Umsetzung dieser Tastaturnavigation lassen möchte. 🙂 Nein, es geht nur darum, einen genaueren Blick gerade auf durchaus gelungene Umsetzungen zu werfen. Das Optimale zu erwarten, soll man ja nie aufgeben zu erhoffen. Das Optimale zu erarbeiten, erst recht nicht.