Wissenswertes für Webdesigner beim Erstellen einer Website bei den Bedienungen
Auf dieser Seite zeigen wir ein paar Tipps und Tricks bei den Bedienungen.
Navigation
- zurück zur Übersicht
- weiter zur Gestaltung
- weiter zur Optimierung einer Website
- Bedienungen erleichtern für die Besucher
Erleichtern von Bedienungen, so wird es programmiert
tabindex
Bei wiederholtem Betätigen der Tabulatortaste werden normalerweise die Verweise in der Reihenfolge angesprungen, in der sie im Quelltext der Webseite geschrieben sind. Auf unserer Seite "Wissenswertes" wäre das aber nicht besonders effektiv, da dann auch jedes Mal der Sprungbefehl "Zum Seitenanfang" angesprungen wird.
Hier kann man sich helfen, in dem man die Tabulatorreihenfolge im HTML-Quelltext festlegt. Für das "tabindex-Attribut" sind Zahlen zwischen 0 und 32767 erlaubt.
Bei dem nachfolgenden Beispiel erreicht man zuerst den "Link2" und danach "Link4", "Link1" und zum Schluß "Link3".
HTML<a href="sprungziel1.php" tabindex="3">Link1</a> <a href="sprungziel2.php" tabindex="1">Link2</a> <a href="sprungziel3.php" tabindex="4">Link3</a> <a href="sprungziel4.php" tabindex="2">Link4</a>
Zum Seitenanfang
Skiplink
Ein Skiplink ist ein Hyperlink am Beginn einer Seite zu einem Sprungziel (Anker) weiter unten im Text.
Es können also größere Bereiche einer Webseite damit bequem übersprungen werden.
Wir haben im Kopfbereich, der für jede Seite gleich ist, folgendes geschrieben:
HTML<ul><li><a class="skip" href="#inhalt" title="Direkt zum Inhalt springen" tabindex="1"> Zum Inhalt springen</a> </li> <li><a class="skip" href="#navigation" title="Direkt zur Navigation springen" tabindex="2"> Zur Hauptnavigation springen</a> </li> </ul>
Im Anker, im Hauptbereich des Textes einer jeden Seite, steht dann folgendes:
HTML<a name="inhalt" id="inhalt" class="skip">Inhalt</a>
Damit aber der sehende Besucher durch diesen Verweis nicht irritiert wird, machen wir den Skiplink nur sichtbar, wenn die Tabulatortaste betätigt wurde.
Wir verschieben per CSS die Hyperlinks mit einer Anweisung aus dem sichtbaren Bereich der Seiten. Sobald nun der Bediener nach dem Aufruf einer Seite die Tabulatortaste drückt, werden die beiden Hyperlinks der Reihe nach wieder in den sichtbaren Bereich geschoben.
CSSa.skip { position: absolute; left: -4000em; top: -4000em; height: 1px; width: 1px } a.skip:focus, a.skip:active { font-size: .7em; left: 40px; top: 60px; height: auto; width: auto; background: #c94; outline: 1px solid #000 }