Verweise
Inhaltsübersicht:
Der Linktext
Besondere Gewichtung seitens der Suchmaschinen erhält der Text zwischen dem öffnenden und schließenden Tag, der Linktext. Er muss aussagekräftig und auch außerhalb des Textzusammenhanges eindeutig und unterscheidbar sein.
Eindeutige Formulierungen sind wichtig für ein barrierefreies bzw. barrierearmes Webdesign. Eine eindeutige Wortwahl für jeden Linktext ermöglicht nicht nur blinden und sehbehinderten Nutzern, die bspw. einen Screenreader einsetzen, sich einen schnellen Überblick über das Angebot einer Webseite zu verschaffen. Da Verweise i.d.R. auch optisch vom eigentlichen Text abgesetzt sind, fallen sie auch dem sehenden Nutzer besonders ins Auge - und damit ist eine wohl überlegte Wortwahl bei Linktexten von hoher Priorität.
Beispiel XHTML-Datei - Verweise - positives Beispiel (Ausschnitt):
<a href="infos.html">Informationen
zu barrierefreiem Webdesign</a>
Beispiel XHTML-Datei - Verweise - negatives Beispiel (Ausschnitt):
<a href="infos.html">Hier klicken</a>
Link-Beschreibungen
Für eine ausführlichere Link-Beschreibung steht das
title-Attribut zur Verfügung. Dieses wird im
Browser als Tooltip
beim Maus-Überfahren des Verweises angezeigt. Es dient dazu, dem Nutzer
besonders bei einem sehr kurzen Linktext
mehr Informationen über das Verweisziel zu
geben (siehe nachfolgendes Beispiel).
Beispiel XHTML-Datei - Verweise (Ausschnitt):
<p>Wenn Sie mehr über die Sitestruktur
wissen möchten, schauen Sie doch mal auf unsere
<a href="sitemap.html"
title="zum Inhaltsverzeichnis:
Verweise nach Kategorien geordnet">Sitemap</a>.</p>
Wird die Maus über einen mit dem title-Attribut
ausgezeichneten Verweis bewegt, wird der angegebene Text kurzzeitig
im Browser sichtbar.
Das ebenfalls manchmal hinterlegte alt-Attribut hingegen
ist ein proprietäres Attribut und war ursprünglich nur für
kurze Bildbeschreibungen während langer Ladezeiten gedacht
(siehe Grafiken).
Bildbeschreibung "Link-Beschreibungen": Bildschirmfoto der optischen Browser-Ansicht des vorangegangenen Quelltext-Ausschnitts. Beim Bewegen der Maus über den Verweis "Sitemap" wird die angegebene Beschreibung "zum Inhaltsverzeichnis: Verweise nach Kategorien geordnet" kurzzeitig sichtbar.
Formatierung von Verweisen
Eine logische, in sich stimmige Reihenfolge der Verweise ermöglicht eine Tabulator-Steuerung über die Tastatur.
Per CSS kann der aktive Navigationspunkt mit einem Rand versehen, der Text fett dargestellt oder kleine Grafiken genutzt werden.
Informationen wie z.B. der Zustand eines Verweises sind jedoch nicht alleine durch eine farbige Textänderung zu kennzeichnen. Kursivschrift kann bspw. ergänzend bereits besuchte von noch nicht besuchten Verweisen unterscheiden (siehe Gestaltungsmöglichkeiten bei Verweisen).
Skip-Links
Skip-Links sind
Sprungmarken zu markanten Bereichen einer
Webseite,
wie bspw. die Navigation, die
Suche und der Inhalt. Sie dienen dazu, diese Bereiche schnell zu
erreichen und sind deshalb möglichst direkt nach dem
<body>-Element zu notieren. Nutzer eines
Screenreader
oder eines Text-Browser
können so komfortabel Bereiche überspringen und direkt zum
für sie relevanten Teil der Webseite gelangen.
Zu unterscheiden sind sichtbare und unsichtbare Skip-Links. Sichtbare Skip-Links werden optisch in den Seitenaufbau integriert, z.B. als Liste mit Navigationsmöglichkeiten wie hier auf dieser Webseite die "Inhaltsübersicht" unterhalb des Teaser und oberhalb des eigentlichen Artikelinhaltes. Bei der zweiten Variante, unsichtbaren Skip-Links, werden die Verweise mit CSS außerhalb des sichtbaren Bereichs positioniert und nur bei Fokussierung eingeblendet - sie sind daher vorerst quasi unsichtbar. Ein entsprechendes Beispiel ist auf diesen Webseiten für Tastaturnutzer integriert. Wird bei Aufruf einer Webseite des Projektes [diːbaːweː] per Tabulatortaste weiter navigiert, werden im oberen linken Seitenbereich zusätzliche Navigatoren angezeigt, die nur bei Tastaturfokus sichtbar sind (bzw. als zusätzliche Navigationsliste für Screenreader und Text-Browser).
Bei der Umsetzung solcher Skip-Links
ist zu beachten, dass der Linktext
möglichst kurz und prägnant gewählt wird. Für
eine ausführliche Zielbeschreibung steht ergänzend das
title-Attribut des Verweises zur Verfügung.
Beispiel XHTML-Datei - Skip-Links (Ausschnitt):
<!-- Liste mit nur bei Fokus sichtbaren Skip-Links -->
<ol id="skiplinks">
<li><a href="#inhalt"
title="direkt zum Inhalt springen (Navigation überspringen)">zum Inhalt</a></li>
<li>[...]</li>
</ol>
[...]
<!-- Sprungmarke für Inhalts-Skip-Link -->
<h1 name="inhalt"
id="inhalt">Überschrift des eigentlichen Inhaltes</h1>
Für den Browser Firefox ist zu beachten, dass solche Sprungmarken nur funktionieren, wenn der Zielbereich - im vorangegangenen Beispiel eine Überschrift der Ebene 1 - wirklich sichtbar ist (und nicht per CSS ausgeblendet)!
Beispiel CSS-Datei - Skip-Links (Ausschnitt):
<!-- Positionierung außerhalb des sichtbaren Bereichs -->
ol#skiplinks a:link,
ol#skiplinks a:visited,
ol#skiplinks a:hover {
height: 1em;
left: -400em;
position: absolute;
}
<!-- Bei Fokus: Positionierung innerhalb des sichtbaren Bereichs -->
ol#skiplinks a:active,
ol#skiplinks a:focus {
background-color: #800000;
color: #fff;
font-weight: bold;
height: auto;
left: 0;
margin: 0;
padding: 0;
text-align: center;
width: 20em;
}
Umsetzungsbeispiel: Klicken Sie auf den nachfolgenden Verweis "Seitenanfang". Dieser führt Sie an den Beginn dieser Datei. Bewegen Sie sich nun per Tastatursteuerung mit der Tabulator-Taste weiter. Sie aktivieren die im Quelltext an inhaltlich erster Stelle hinterlegten Skip-Links dieser Seite, die nur bei Fokussierung sichtbar sind (oben links).
Weiterführende Literatur:
- Erlhofer, Sebastian:
- Suchmaschinen-Optimierung,
Seite 226 ff.,
Galileo Computing, Bonn, 1. Auflage 2005 (Galileo Press),
ISBN 3898426203 - Radtke, Angie und Charlier, Michael:
- Barrierefreies Webdesign. Attraktive Websites
zugänglich gestalten,
Seite 28-29,
Addison-Wesley Verlag, München, 1. Auflage 2006,
ISBN 3827323797