Autor und Datum der Veröffentlichung:

Peter Rozek | 15.07.2007

Themenbereich:

Barrierefreiheit, Webentwicklung

Webentwickler, die wert legen auf Barrierefreiheit und standardkonforme Umsetzung, wissen um die Notwendigkeit Benutzern von Screenreader Hilfen anzubieten die zur einfachen Handhabung von Dokumenten dienen.

Inhalt

  1. Sprungmarken (Skiplinks)
  2. Hinweis zum Verständnis
  3. Allgemeines zu Sprungmarken
    1. Gliederung längerer Dokumente
  4. Sprungmarken maskieren
  5. Kontextuelle Hinweise in Sprungmarken
  6. Schlussbemerkung

Sprungmarken (Skiplinks)

Webangebote mit viel Text setzen mittlerweile Sprungmarken („Skiplinks“) ein, damit die Navigation vereinfacht wird und lästiges Scrollen erspart bleibt. Für die Benutzer von Textbrowsern und Screenreadern sind Sprungmarken eine zusätzliche Hilfe zur schnellen Seitennavigation. Mit einem Skiplink, der direkt zum Inhalt führt, können Bereiche wie die Navigation übersprungen werden. Gerade wenn die Webseite regelmäßig besucht wird, braucht sich der Screenreader-Nutzer nicht immer die Navigation vorlesen lassen.

Eine solche einfache und populäre Vorgehensweise im Webdesign kann effektiv und angenehm sein, wenn sie nicht übermäßig eingesetzt wird. Ansonsten führt dies zu allerhand Stillblüten, die eher hinderlich als nützlich sind.

Mit einem wohl überlegten Einsatz von Sprungmarken kann sich der Benutzer nach und nach damit vertaut machen. Zudem hat es den Vorteil schneller und leichter zum Ziel zu kommen und steigert den Usability-Wert einer Seite.

Hinweis zum Verständnis

Zum besseren Verständnis warum Sprungmarken mit Sorgfalt eingesetzt werden sollten: „Screenreader lesen nicht nur Inhalte einer Seite, sie erkennen auch Strukturen im Quelltext. So erkennen die meisten Screenreader Absätze, Überschriften und Listenelemente, wenn Inhalte als solche ausgezeichnet werden. Gleichzeitig bieten moderne Screenreader die Möglichkeit, zwischen solchen (X)HTML-Elementen zu springen."

Die nächsten Abschnitte beschreiben ein paar Empfehlungen wie Sprungmarken benutzt werden und wie Sie maskiert werden können.

Allgemeines zu Sprungmarken

Eine Sprungmarke (engl. Skiplink) innerhalb eines HTML Dokuments wird auch als Anker bezeichnet. Der Begriff Anker steht allgemein für den Anfang- und Endpunkt eines Hyperlinks.

Sprungmarken lassen sich in HTML mit dem Element a wie „anchor“ (englisch für Anker) zusammen mit dem Attribut name realisieren. Seit HTML 4 kann zudem nahezu jedes Element als Sprungmarke dienen, indem es ein id-Attribut erhält.

Beispiel:

<h2><a name="sprungmarke">Überschrift</a></h2>

Alternativ:

<h2 id="sprungmarke">Überschrift</h2>

Gliederung längerer Dokumente

Für längere Artikel bietet sich die Vorgehensweise an, dem Text eine Inhaltsübersicht voranzustellen. Es dient zu besseren Übersicht und bestimmte Inhaltsbereiche können direkt angesteuert werden.

Nummerierte Liste um die inhaltliche Gliederung abzubilden.

<h3>Inhalt</h3>
  <ol>
  <li><a href="#einleitung">Einleitung</a></li>
  <li><a href="#kapitel-1">Kapitel 1</a></li>
  <li><a href="#kapitel-2">Kapitel 2</a></li>
  <ol>
  <li><a href=”#unterkapitel">Unterkapitel</a></li>
  </ol>
  </li>
  <li><a href="#fazit">Fazit</a>
  </ol>

Im Text erhalten die Sprungmarken ein id-Attribut. Meines Erachtens ist die Auszeichnung über ein id-Attribut übersichtlicher und hält den Quell-Code schlank.

<h3 id="einleitung">Einleitung</h3>
  <p>Es folgt der Text</p>

Sprungmarken maskieren

Sprungmarken die Benutzern von Screenreadern bei der Navigation helfen, können vor grafischen Browsern versteckt werden. Der normale Internetnutzer navigiert über die Maus und ist nicht zwangsläufig auf diese Hilfen angewiesen.

Werden Sprungmarken gesetzt, kann dies wie im Beispiel gezeigt umgesetzt werden.

HTML:

<p class=“unsichtbar“><a name="inhalt“>Direkt zum Inhalt springen</a></p>

CSS:

.unsichtbar {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: inline;
  }

Kontextuelle Hinweise in Sprungmarken

Werden Sprungmarken gesetzt um die Möglichkeit zu geben Navigationsleisten zu überspringen ist die deutliche und eindeutige Benennung erforderlich. Eine Benennung ist vor allem dann gefordert wenn es:

Ausführliche Darstellung über Texthinterlegung für Screen- und Webreader in der Navigation auf der Webseite von Jan Eric Hellbusch.

Schlussbemerkung

Sprungmarken bilden ein nützliches Element in Dokumenten und unterstützen vor allem bei komplexen Dokumenten die schnelle Navigation und Zielfindung. Die dargestellten Empfehlungen dienen der Orientierung und dokumentierten einen Schritt in Richtung Usability und Barrierefreiheit zu gehen.

nach oben


CSS-Design: Grundlagen Druck-Stylesheets

(vom 28.10.2007) Druck-Stylesheets sollten prinzipiell fester Bestandteil einer jeden guten Website sein. Der allgemeine Gebrauchswert einer Website wird gesteigert und sorgt für zufriedene Benutzer.

Zugänglichkeiten fixer-, fluider oder elastischer Layouts

(vom 10.09.2007) Welche Vorgehensweise beim Layout eignet sich für die Gestaltung von zugänglichen Websites am besten? Jede Layout-Variante bietet Vor- und Nachteile. Wenn Sie eine zugängliche Website erstellen wollen oder müssen, sollte bereits in der Entwurfsphase berücksichtigt werden, mit welchem Layout der Entwurf umgesetzt werden kann.

Zugängliche Websites (Accessibility)

(vom: 30.07.2007) Mit einer Barrierefreien Webseite können Sie die Reichweite Ihres Webangebot steigern! Barrierefreies Internet (Fachbegriff: Accessibility) bezeichnet Internet-Angebote, die von allen unabhängig von ihren körperlichen und/oder technischen Möglichkeiten uneingeschränkt genutzt werden können.
» über Accessibility.

Checkliste barrierefreier Webanwendungen

(vom: 01.07.2007) Die Vorteile barrierefreier Webauftritte liegen klar auf der Hand und sind weitgehend anerkannt. Mit einer Checkliste zur Gestaltung barrierefreier Webanwendungen und Webauftritte können Auftraggeber sicherstellen das Vorgaben erfüllt werden und die Agenturauswahl ein wenig erleichtert wird.
» zur Checkliste