Infos zur Barrierefreiheit für:

Links richtig kennzeichnen

Ein wichtiger Punkt der Barrierefreiheit ist der Umgang mit Links. Links sollen auf einer Webseite eindeutig erkennbar sein. Da Internetnutzer schnell lernen, dass Links meist unterstrichen sind, wäre es ratsam dies innerhalb von Fließtext weiterhin zu befolgen. Bei der Navigationsspalte können Nutzer auch nicht unterstrichene Links schnell zuordnen, da die Umgebung sie eindeutig als Links identifiziert. Im Fließtext sollten Links aber anhand der Farbe und der Unterstreichung besonders als Links hervorgehoben werden.

Wichtig ist auch, dass bei Links die verschiedenen möglichen Stadien optisch unterschiedlich dargestellt werden. Der Besucher kann so eindeutiger feststellen, ob er einen Link bereits besucht hat oder nicht. Das ist besonders bei langen Linklisten oder sehr komplexen Webseiten hilfreich.

Link-Zustände und ihre richtige Reihenfolge

Ein Link kann sich in verschiedenen Zuständen befinden. Je nachdem wie er dann per CSS gekennzeichnet ist, kann der Besucher so erkennen ob er sich zum Beispiel gerade mit der Tastatur auf diesem Link befindet oder ob er den Link bereits besucht hat. Die einzelnen relevanten Link-Zustände und ihre richtige Reihenfolge in der man sie in CSS angibt, sind:

Link-Pseudoklassen:

a:link
Links zu noch unbesuchten Seiten
a:visited
Links zu bereits besuchten Seiten
a:hover
Links über die der Besucher gerade mit der Maus fährt
a:focus
Links auf denen gerade der Fokus liegt (zum Beispiel durch Navigieren mit der Tastatur)
a:active
Links, die gerade angeklickt sind

Die Zustände eindeutig identifizierbar machen

Da es wichtig ist, dass der Benutzer die verschiedenen Link-Zustände leicht erkennen kann, müssen sich die wichtigsten Zustände optisch eindeutig von einander unterscheiden. Es reicht nicht, dabei nur ein Element zu verändern (zum Beispiel die Schriftfarbe), da diese Änderung leicht übersehen wird. Es ist also ratsam, auch eine Änderung durchzuführen, die nicht nur die Farbe betrifft.

Damit der Nutzer nicht überfordert wird, kann man aus den Pseudoklassen drei Gruppen bilden:

Diese Gruppen unterscheidet man nun möglichst eindeutig durch mehrere optisch erkennbare Änderungen. Ein Beispiel hierfür könnte so aussehen:

a:link
Normale Schriftdarstellung, eine Schriftfarbe, eine gleichfarbige Unterstreichung
a:visited
Kursive Schriftdarstellung, eine andere Schriftfarbe, eine andere Unterstreichung
a:hover, a:focus, a:active
Normale Schriftdarstellung, helle Schriftfarbe, dunkle Hintergrundfarbe, keine Unterstreichung

Auf diese Art gibt es jeweils ein farbiges und ein farbunabhängiges Unterscheidungsmerkmal. Zwischen unbesuchtem und besuchtem Link verändert sich die Farbe und die Schriftdarstellung. Alle anderen Links fallen dadurch auf, dass sie eine komplett andere Hintergrundfarbe haben und sich so massiv vom umliegenden Text und anderen Links unterscheiden.

Achtung - Bug-Warnung

Die eindeutige Unterscheidung bei den Linkzuständen löst leider im Internet Explorer gerne eine Fehldarstellung aus. Es kann dadurch der bekannte Guillotine-Bug in Erscheinung treten. Hilfe zur Lösung dieses Problems, gibt es bei den weiterführenden Links.

zum Seitenanfang