Peter Rozek | 15.07.2007
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.
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.
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.
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.
<a href="#sprungmarke">Linktext</a>
<a href="seite.html#sprungmarke">Linktext</a>
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.
<h2><a name="sprungmarke">Überschrift</a></h2>
<h2 id="sprungmarke">Überschrift</h2>
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 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.
<p class=“unsichtbar“><a name="inhalt“>Direkt zum Inhalt springen</a></p>
.unsichtbar { position: absolute; left: -1000px; top: -1000px; width: 0px; height: 0px; overflow: hidden; display: inline; }
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.
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.
(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.
(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.
(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.
(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