Verweistexte von Links verstecken
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.
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
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:
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.
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.
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.
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.
-
Student der Biochemie und seit einigen Jahren im Hobby-Entwicklerbereich tätig. Stärken in XHTML/CSS und PHP, alles was mit Grafik zu tun hat, gehört nicht dazu.
-
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.
Weitere Lösung
Soll die Grafik z. B. nur einen Button mit einer Standardschriftart darstellen, kann man auch einfach nur den Button als Hintergrund angeben. Die Schrift wird dann ganz normal über den Linktext genommen. Dabei entfällt auch automatisch das Problem mit dem verstecken ;-)
alt-Attribut
Wenn das Bild zum Inhalt gehört und nicht als reines Designelement angesehen werden kann - was bei Links normalerweise der Fall ist - bietet sich außerdem das alt-Attribut an:
Re: alt-Attribut
Imho nicht außerdem, sondern korrekterweise.
Re: alt-Attribut
auf ein kleines Problem der eigentlich besseren Methode sollte noch kurz eingegangen werden: da die Buttons nur effektiv Grafiken sind (also zb nicht in einem Textbrowser) werden mehrere Buttons mit Lehrzeichen aneinandergereiht, die nicht auf * {margin:0; padding:0;} hören.