Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

10.1 Skip-Links: Hyperlinks auf derselben Seite

Kennen Sie Skippy, das Buschkänguru? To skip heißt »hüpfen« oder »springen«, und daher wird ein Hyperlink, der zu einer anderen Stelle auf derselben Webseite springt, manchmal auch Skip-Link genannt.

Ein Skip-Link zum Überspringen der Navigation

Das Web ist so konzipiert, dass eine Webseite nicht nur am Bildschirm betrachtet werden kann, auch wenn das prozentual gesehen wohl die häufigste Nutzungsform ist. Besucher, die sich die Webseite vorlesen lassen, müssten sich auf jeder Seite die komplette Navigation wieder anhören, bevor sie zum eigentlichen Inhalt kommen. Mit einem Skip-Link kann man z. B. die Navigation überspringen und so direkt zum Inhalt der Seite gelangen.

Die Stelle auf einer Webseite, zu der der Hyperlink springt, wird Sprungmarke genannt und im Quelltext durch das Attribut id gekennzeichnet. Als Sprungziel für den Hyperlink benutzen Sie eine ID, im Beispiel #textbereich.

ToDo: Erstellen Sie einen Skip-Link zum Überspringen der Navigation
  1. Öffnen Sie die Seiten index.html und kontakt.html im Editor.
  2. Ergänzen Sie auf beiden Seiten die hervorgehobene Zeile:

    <body>
    <div id="wrapper">
    <div id="kopfbereich">
    <div class="skiplink"><a href="#textbereich">Zum Inhalt</a></div>
    <h1> ...

  3. Speichern Sie die beiden Seiten und betrachten Sie sie in einem Browser.

Und so sieht der Skip-Link im Browserfenster aus:

Abbildung 10.1: Der Skip-Link – noch nicht ausgeblendet
Abbildung 10.1: Der Skip-Link – noch nicht ausgeblendet

Die Hyperlinks springen zum HTML-Element mit dem Attribut id="textbereich". Falls Sie den Sprung zum Textbereich nicht sehen können, verkleinern Sie das Browserfenster einfach so weit wie nötig. Im Stylesheet wird der Skip-Link bei Bedarf für die Anzeige in einem visuellen Browser später ausgeblendet.

Auf der Beispielseite wäre ein Skip-Link nicht wirklich notwendig, weil die Navigation extrem kurz ist, aber es gehört zum guten Stil für eine Webseite mit Anspruch auf Barrierefreiheit, einen Skip-Link einzubauen. Und jetzt wissen Sie, wie es geht.

Ein Hyperlink zurück nach oben

Falls Sie auf einer langen Webseite Ihren Besuchern einen Link »zurück nach oben« anbieten möchten, können Sie dieselbe Technik benutzen:

  • <a href="#wrapper">Nach oben</a>

Dieser Link würde auf der Beispielseite zum Element <div id="wrapper"> springen, das direkt unterhalb von body steht.

Den Skip-Link ausblenden

Da der Skip-Link in erster Linie als Hilfe beim Vorlesen der Webseite gedacht ist, werden Sie ihn mithilfe von CSS gleich wieder ausblenden. Im HTML hat der Skip-Link das Attribut class="skiplink", und wenn im HTML-Element das Attribut class auftaucht, gebrauchen Sie im CSS einen vorangestellten Punkt vor dem Namen der Klasse:

  • .skiplink bedeutet »das Element mit dem Attribut class="skiplink"«.

Eine einfache Art, ein HTML-Element auf einer Webseite auszublenden, wäre die Deklaration

  • .skiplink {display: none;} /* nicht so gut */

Leider hat sie den entscheidenden Nachteil, dass einige Screenreader einen so unsichtbar gemachten Skip-Link nicht mehr vorlesen und er unter Umständen vor genau den Leuten versteckt wird, für die er eigentlich gedacht war. Detailliertere Informationen zum Ausblenden von HTML-Elementen finden Sie auf der folgenden Webseite:

Die im folgenden ToDo gezeigte CSS-Regel ist zwar ein ganz schöner Brocken, stellt aber den relativ zuverlässigsten Weg dar, um HTMLElemente unsichtbar werden zu lassen.

 

ToDo: Eine CSS-Regel für die Klasse skiplink erstellen
  1. 1. Fügen Sie in Abschnitt 2 für allgemeine Klassen und IDs des Stylesheets folgende CSS-Regel ein:

    .skiplink {
      position: absolute;
      top: -9999px;
      left: -9999px;
      width: 0;
      height: 0;
      font-size: 0;
      line-height: 0;
    }

  2. Speichern Sie das Stylesheet und betrachten Sie die Webseiten im Browser.

Alle mit der Klasse skiplink ausgezeichneten HTML-Elemente werden durch diese Regel ausgeblendet, indem sie durch Angabe von (position, top und left) weit außerhalb des Bildschirms positioniert werden.

Die Angabe von 9999 Pixeln erscheint vielleicht übertrieben, aber im Zeitalter immer größer werdender Bildschirmauflösungen sollte man lieber auf Nummer sicher gehen. Die Eigenschaft position lernen Sie übrigens im Kapitel über den Flow und die Positionierung genauer kennen (im Buch ab Seite 238).

Die abschließenden Deklarationen (width, height, font-size und line-height) geben den Elementen sicherheitshalber noch ein paar Anweisungen mit auf den Weg, damit sie auf der sichtbaren Webseite auch wirklich keinerlei Platz beanspruchen.