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.
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.Ingo
am 12.07.2008 - 10:19
Naja, im Opera (9.51 XP) funktioniert's nicht.
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 ;-)
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.
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!
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.
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.
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(?)
Sylvia Egger (Autor)
am 12.07.2008 - 12:59
@Maxx, nee - auch mit den Formularfeldern, so zumindest auf dem Mac Opera.
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.
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.
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. :)
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.
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".
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 dema:hover
-Zustand zu positionieren ist. Vor allem auch im Hinblick auf die Barrierefreiheit.Es sieht ein wenig wie ein Kopf-an-Kopf-Rennen aus. :)
Die Kommentare sind geschlossen.