Verweistexte von Links verstecken

0 | 11339 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Verweistexte von Links verstecken" mit Ihrem Wissen!

Anzeige Hier werben

Hintergrund

Nicht selten kommt es vor, dass anstelle von normalen Textlinks Hintergrundgrafiken für Links verwendet werden sollen. Zum einen können Suchmaschinen diese Bilder nicht lesen und übersehen so möglicherweise relevante Inhalte, zum anderen ist diese Praxis in vielen Umsetzungen nicht mit Barrierefreiheit in Einklang zu bringen.

Beispiel

Der folgende Code ist ein Beispiel wie man es nicht machen sollte.

 
HTML
1
2
3
<a href="beispiel.html">
<img src="beispiel.png" />
</a>

Dieses Beispiel setzt die oben genannten Nachteile in die Tat um.

Besser Umsetzung mit CSS

Im Folgenden soll eine bessere Umsetzung in verschiedenen CSS-Versionen beschrieben werden. Dazu dient uns beide Male dieser HTML-Quelltext. Zur Sicherheit definieren wir das title-Attribut

 
HTML
1
<a href="beispiel.html" title="Beispielseite">Beispielseite</a>

CSS 1 und 2

In CSS 1 und 2 muss man sich an einem kleinen Trick bedienen um den Verweistext "Beispielseite" zu verstecken. Dazu missbrauchen wir die Eigenschaft text-indent. Diese ist an sich dazu gedacht die erste Zeile eines Absatzes einzurücken. Durch Angabe eines negativen Wertes wird die Einrückung nach links vorgenommen und ist dieser groß genug gewählt, verschwindet der Linktext aus dem Sichtfeld. In der Regel wird hierfür der Wert -9999px verwendet. Dies könnte wie folgt aussehen:

 
css
1
2
3
4
a {
text-indent: -9999px;
background: url(beispiel.png);
}

Der Verweistext ist somit nicht mehr sichtbar und steht trotz dessen im Quelltext.

Ein Nachteil bei dieser Methode ist, dass beim Klicken in vielen Browsern eine so genannte outline auftritt, die als gepunktete Linie dargestellt wird. Diese kann mit outline: none; zwar ausgeblendet werden, jedoch ist der Link dann nicht mehr über Drücken der Tabulatortaste erreichbar und somit in Sachen Barrierefreiheit suboptimal.

Abhilfe schafft hier der Selektor :focus. Mit diesem können dem Verweis beim drücken der Tabulatortaste andere Eigenschaften zugewiesen werden. In folgendem Beispiel wird bei :hover ( überfahren mit der Maus ) und :focus ( Selektieren via Tastatur ) dem Verweis ein anderes Hintergrundbild zugewiesen, um so den Link wieder "erreichbar" beziehungsweise sichtbar zu machen.

 
css
1
2
3
4
a:hover, a:focus {
outline: none;
background: url(beispiel-hover.png);
}

CSS3

Durch die Verwendung von CSS3 ist dies noch einfacher möglich. Dabei wird die Möglichkeit der Farbdefinition mittels Alphakanal ausgenutzt. Wird dieser gleich 0 gesetzt, ist die Schrift transparent.

Firefox2Nein3Unterstützt
IE6Nein7Nein
Opera9Nein
Safari3Unterstützt
Unterstützung von RGBA-Werten bei color
 
css
1
2
3
a {
color: rgba(0, 0, 0, 0);
}

Hierbei ist jedoch der Nachteil, dass die CSS 3 Unterstützung in vielen Browsern noch nicht implementiert ist.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Verweistexte von Links verstecken" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Verweistexte von Links verstecken" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.