Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sonnenseiten: Tastaturnavigation

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sonnenseiten: Tastaturnavigation

Die moderne Webseite ist ein Irrgarten und die Bewegung darin wie das Aufrollen einer Schnur. Ob die Bewegung ans Ziel führt, entscheidet sich durch Technik. Sylvia Egger führt uns mit der Tabulatortaste ans Ziel.

Ein schönes Bild: Das Labyrinth oder der Irrgarten sind im Grunde Orientierungsfiguren. Die Webseite wäre der Irrgarten und die Bewegung darin wie das Aufrollen einer Schnur. Ob die Bewegung zum Ziel führt, entscheidet sich durch die gewählte Technik. In der späten Renaissance wandelt sich der Irrgarten zu einem körperlichen Erlebnis. Man lässt nicht nur das Auge über die Wege schweifen, sondern legt wert auf Begehbarkeit. Man wollte ganz konkret den eigenen Körper im Irrgarten erfahren.

Zukunft Europa: Detailansicht Tastaturnavigation

Auch wir wählen jetzt eine ganz konkrete Technik, das visuelle Erlebnis mit der Maus hat für uns längst keinen Reiz mehr. Wir nehmen jetzt die Tastatur an die Hand und schreiten forsch in den Irrgarten www.zukunfteuropa.at.

Was für ein natürliche Tastaturbewegung finden wir vor: Alles ist sofort erreich- und begehbar. Wichtige Bezugspunkte wie Navigationen, Inhalte und Formulare sind im Quellcode so angelegt, dass man mit der Tabulatortaste rasch und linear vorankommt. Dafür braucht es keinen TABINDEX mehr. Schon haben wir sie vergessen, jene alten Irrgärten mit ihren Sackgassen, unerreichbaren Bereichen und Zick-Zack-Navigationen  – Webseiten, in deren ziellosen Strukturen der Reisende unweigerlich verloren ging.

Alle mit der Tabulatortaste ausgewählten Bereiche sind mit Farben und Unterstreichungen hervorgehoben. Der CSS-Pseudoselektor :hover ist längst Mainstream in modernen Webseiten, hier werden wir noch zusätzlich mit :focus und :active verwöhnt. Der Reiz der Geschwindigkeit ist kombiniert mit einem visuellem Erlebnis: was für ein paradiesischer Zustand!

Gänzlich elegant und distinguiert nutzen wir zur Fortbewegung die Sprunglinks, die man mit der Tabulatortaste aktiviert, und springen damit direkt zum Inhalt und zu den Navigationen. Wir sind bald vertraut damit und fragen uns noch kurz vor dem Ziel: Warum immer verstecken? Ist es nicht das Ziel, den modernen Irrgarten begehbar zu machen und Sprunglinks gut sichtbar und praktisch zu integrieren?

Fazit

Man könnte bei dieser Reise das Prinzip des Irrgartens umkehren: Nicht das schnelle Verlassen ist der letzte Wunsch, den wir noch haben, sondern das schnelle Erreichen des Ziels ist das eigentliche Erlebnis, die victory bridge des modernen Webreisenden.

Zur Aktion

Dies ist ein Text zur Aktion Sonnenseiten: Webkrauts loben – höchst subjektiv – einzelne Details von Webseiten. Entgegen unserer Gewohnheit steht diesmal nicht der Quelltext, sondern die Idee im Mittelpunkt.

Kommentare

Moritz Gießmann
am 12.07.2008 - 10:01

Wirklich sehr schön gemacht. Ich geb zu ich hab noch nie dran gedacht einem Link die Pseudoklasse :focus zu geben. Sehr feine Idee.

Permanenter Link

Ingo
am 12.07.2008 - 10:19

Naja, im Opera (9.51 XP) funktioniert's nicht.

Permanenter Link

GE
am 12.07.2008 - 12:17

So ist das eben mit der Barrierefreiheit. Ausgerechnet ein Browser, der diesbezüglich als vorbildlich gilt, macht die Bemühungen zunichte.

Dafür gehts im IE 5.5 unter Windows 98 ;-)

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 12.07.2008 - 12:27

@ingo

Der Opera kann mit Tabulatortaste nur für Formularfelder genutzt werden, man muss mit der A-Taste durch die Links gehen. Sprunglinks klappen wohl auch noch nicht.

Auf meinem Opera 9.5. klappt das damit dann ganz gut.

Ist halt einfach ein anderer Ansatz. Und am Mac kommt noch zusätzlich das Problem dazu, dass man die gesamte Tastaturnavigation immer erst in jedem Browser aktivieren muss, so im Safari erst das Häkchen setzen, bitte mit der Tabulatortaste alle Felder, nicht nur Formularfelder, ansteuern.

Hat mich anfänglich ziemlich irritiert das.

Permanenter Link

Maxx Hilberer
am 12.07.2008 - 12:35

unter WIN XP mit Opera 9.51 geht das nicht mal mit der a-Taste. Ich geb den Browser wieder zurück!

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 12.07.2008 - 12:37

Und noch eine kleine Ergänzung: auch dem Mac Opera kann man auch die Apfel-Taste drücken und mit den Vor- und Zurück-Tasten zwischen den Links steuern. Ev. geht das auch auf der Windows-Version.

Permanenter Link

Andreas
am 12.07.2008 - 12:43

Das Design von der Seite gefällt mir fast noch besser. Das mit den Tastaturkürzeln ist ja ganz nett, aber auch nicht mehr als eine schöne Spielerei finde ich.

Permanenter Link

Maxx Hilberer
am 12.07.2008 - 12:58

dann mache ich mir jetzt mal schnell ein Postit an den Monitor mit den exotischen Tastenkombis meines neuen Operas. Die Tabulator Taste z.B. scheint ja jetzt nur noch mit den Tabs zu tun zu haben(?)

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 12.07.2008 - 12:59

@Maxx, nee - auch mit den Formularfeldern, so zumindest auf dem Mac Opera.

Permanenter Link

Maxx Hilberer
am 12.07.2008 - 13:03

um das hier nicht zum Opera Bashing verkommen zu lassen, möchte ich noch erwähnen das ich die Tastatur Navigation von zukunfteuropa.at sehr vorbildlich und den Artikel darüber sehr gelungen finde.

Permanenter Link

Andreas D.
am 12.07.2008 - 13:34

Wirklich hervorragen gelöst. Gefällt mir sehr gut.
Ich persöhnich denk in letzter Zeit, zum Glück immer häufiger daran die Pseudoklasse :focus zu gestalten.

Einzige Kleinigkeit, bei dem bei www.zukunfteuropa.at: auf der Startseite gibt es den Link Zum Submenü springen (Alt+2) obwohl es kein Submenü gibt. Das ist noch bisschen verwirrend.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 12.07.2008 - 15:16

@Andeas D.
Das wurde leider CMS-technisch nicht so gut gelöst. Der Sprunglink auf das Submenü führt zwar in die linke Spalte, aber auf der Startseite ist da noch kein Inhalt. Erst in den Unterseiten, wenn da in der Navigation Unterpunkte vorliegen, gibt es auch ein gefülltest Submenü.

Leider - und das muss hier auch erwähnt werden - , habe ich keine Kandidaten gefunden, der eine vollständige Tastaturnavigation vorzuweisen hatte. Daher habe ich den besten aus den Kandidaten gewählt, aber ich bin mir klar, dass auch dieser diverse "Schattenseiten" aufzuweisen hat.

Das ist halt der aktuelle Stand, leider. Es würde mich freuen, wenn da noch mehr Handwerk und Augenmerkt darauf gelegt würde. :)

Permanenter Link

Ansgar Hein
am 13.07.2008 - 16:13

Sehr schön. Der gut sichtbare Tastatur-Fokus gefällt mir besonders gut. Einziges Tastatur-Manko: Keine Rücksprungmarke zum Seitenanfang am Fuß jeder Seite und vielleicht etwas zuviele am Seitenanfang.

Viel interessanter finde ich aber die Kommentare und die Einsicht, neben :hover auch an die Stiefkinder :focus und :active zu denken. Hatte neulich erst wieder eine kurze Erinnerung von Gerrit an "Lord Vader's Former Handle Anakin" erhalten.

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 14.07.2008 - 14:48

@Ansgar
Das stimme ich Dir völlig zu, wer braucht schon soviele Sprunglinks am Anfang der Seite - aber die Leute machen leider hier immer zuviel als zu wenig.
Der Top-Link wäre fein, ja.

Und ich bevorzuge "Lord Voldemort Has Foul Ambitions".

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 14.07.2008 - 16:26

Für diejenigen, die mit diesen Eselsbrücken nicht soviel anfangen können: eine eher aktuelle Diskussion, wie man die Reihenfolge der Pseudolinks gestalten soll, es geht im Grunde dann um die Position des a:focus, ob dieser vor oder nach dem a:hover-Zustand zu positionieren ist. Vor allem auch im Hinblick auf die Barrierefreiheit.

Es sieht ein wenig wie ein Kopf-an-Kopf-Rennen aus. :)

Permanenter Link

Die Kommentare sind geschlossen.