Navigationsmenüs mit Tastatursteuerung

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Links in einem Navigationsmenü sollen mit Hilfe von Tastaturkürzeln aktiviert werden können.

Lösung

Erzeugen Sie eine ungeordnete Liste mit Links, und verwenden Sie die a-Elemente mit dem Attribut accesskey, um für die verschiedenen Links ein Tastaturkürzel festzulegen:

<div id="navsite">
  <ul>
    <li><a href="/" accesskey="s">Startseite</a></li>
    <li><a href="/about/" accesskey="u">Über uns</a></li>
    <li><a href="/archives/" accesskey="a">Archive</a></li>
    <li><a href="/writing/" accesskey="c">Schreiben</a></li>
    <li><a href="/speaking/" accesskey="p">Sprechen</a></li>
    <li><a href="/contact/" accesskey="k">Kontakt</a></li>
  </ul>
</div>

Um die Tastaturkürzel in den Links hervorzuheben, umgeben Sie die jeweiligen Buchstaben mit einem span-Element:

<div id="navsite">
  <ul>
    <li><a href="/" accesskey="h"><span class="akey">S</span>tartseite</a></li>
    <li><a href="/about/" accesskey="u">Über <span class="akey">u</span>ns</a></li>
    <li><a href="/archives/" accesskey="a"><span class="akey">A</span>rchive</a></li>
    <li><a href="/writing/" accesskey="c">S<span class="akey">c</span>hreiben</a></li>
    <li><a href="/speaking/" accesskey="p">S<span class="akey">p</span>rechen</a></li>
    <li><a href="/contact/" accesskey="k"><span class="akey">K</span>ontakt</a></li>
  </ul>
</div>

Danach können Sie die Buchstaben für die Zugriffstasten über einen Klassenselektor mit den entsprechenden Stildefinitionen versehen (siehe nächste Abbildung):

.akey {
 text-decoration: underline;
}

Die den Zugriffstasten entsprechenden Buchstaben werden durch eigene Stildefinitionen hervorgehoben

Abbildung: Die den Zugriffstasten entsprechenden Buchstaben werden durch eigene Stildefinitionen hervorgehoben.

Diskussion

Die Verwendung von Tastaturkürzeln ermöglicht es Ihren Benutzern, die Website – auch ohne die Verwendung einer Maus – einfach zu bedienen. In unserer Lösung wurden den Navigationslinks Zugriffstasten zugewiesen. Durch gleichzeitiges Drücken von ALT (Windows) bzw. CTRL (Mac) und der angegebenen Taste folgt der Browser dem verknüpften Link und zeigt die neue Seite an.

Werden die gleichen Tastaturkürzel auf allen Seiten einer Website verwendet, so kann das den Benutzern ein Gefühl von Zusammenhang vermitteln.

Die Tastatursteuerung sollte in Internet Explorer 4+ für Windows, Mozilla, Firefox, Netscape Navigator 6+, Safari und Opera 7+ funktionieren.

Ein Hindernis bei der Verwendung von Zugriffstasten besteht darin, dass es keine Standardkürzel für bestimmte Links gibt. Sie müssen selbst entscheiden, ob für die Startseite besser die Taste "s" (wie in unserem Beispiel) oder etwa "h" (für "Homepage") verwendet wird.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln