Webkrauts: Für mehr Qualität im Web.

Artikel

Sonnenseiten: Tastaturnavigation

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 Autorin

Sylvia Egger arbeitet als Senior Webproducerin in Köln und setzt sich aktiv für die Barrierefreiheit von modernen Webseiten ein. Dafür steht besonders ihr Weblog sprungmarker.

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.

Info:

Sonnenseiten: Tastaturnavigation ist Beitrag Nr. 431

Autor:

Sylvia Egger am 12. Juli 2008 um 08:00

Kategorie:

Sonnenseiten

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

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

   Kommentar von Moritz Gießmann - 12. Juli 2008 um 10:01

2. 2.
   

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

   Kommentar von Ingo - 12. Juli 2008 um 10:19

3. 3.
   

   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

   Kommentar von GE - 12. Juli 2008 um 12:17

4. 4.
   

   @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.

   Kommentar von sprungmarker - 12. Juli 2008 um 12:27

5. 5.
   

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

   Kommentar von Maxx Hilberer - 12. Juli 2008 um 12:35

6. 6.
   

   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.

   Kommentar von sprungmarker - 12. Juli 2008 um 12:37

7. 7.
   

   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.

   Kommentar von Andreas - 12. Juli 2008 um 12:43

8. 8.
   

   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(?)

   Kommentar von Maxx Hilberer - 12. Juli 2008 um 12:58

9. 9.
   

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

   Kommentar von sprungmarker - 12. Juli 2008 um 12:59

10. 10.
    

    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.

    Kommentar von Maxx Hilberer - 12. Juli 2008 um 13:03

11. 11.
    

    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 http://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.

    Kommentar von Andreas D. - 12. Juli 2008 um 13:34

12. 12.
    

    @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.

    Kommentar von sprungmarker - 12. Juli 2008 um 15:16

13. 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.

    Kommentar von Ansgar Hein - 13. Juli 2008 um 16:13

14. 14.
    

    @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".

    Kommentar von sprungmarker - 14. Juli 2008 um 14:48

15. 15.
    

    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.

    Kommentar von sprungmarker - 14. Juli 2008 um 16:26

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.