-9999em. 9 danke: Neues CSS-Image-Replacement

5. März 2012 | 1 Kommentar

-9999em

Wer täglich mit CSS arbeitet, weiß schon, worum es hier gehen wird: Image Replacement, barrierefreies Verstecken von Inhalten, z.B. für das Logo einer Seite. Jeffrey Zeldman hat auf seinem Blog vorgestern eine bessere Alternativezum -9999em-Hack vorgestellt.

Why the hack..?

Warum das Ganze? Ganz einfach. Stell dir vor, Deine Webseite heißt “Meine Superseite” und Du hast Dir ein schickes Superlogo, mit einem schickem Supermannstylefont entworfen und klebst das links oben in die Ecke deiner Superseite.

Super wa? Nein.
Denn Suchmaschinen und Screenreader können Dein Superlogo nicht lesen? Deswegen packst Du noch ganz oben auf die Seite eine Überschrift mit <h1>Meine Superseite</h1>.

Überschrift und Logo zusammen mit dem gleichen Inhalt sehen aber superpanne nebeneinander aus. Also muss – je nach Besuchergruppe (Mensch oder Such- bzw. Vorlesemaschine) – jeweils das eine oder das andere nicht sichtbar sein.

Willkommen in der Welt des Image Replacement.

Das Verstecken von Logo bzw. Schriftzug erreicht man mit CSS-Techniken. Doch dabei kann man viel falsch machen. Nicht wenige Webseiten sind so gebaut, dass es zwar eine H1 gibt, das Logo auch sichtbar ist, aber Suchmaschine und Screenreader doch nix mitbekommen. Das ist nicht super und nicht barrierefrei!

Zu dieser Problematik gibt es einen Artikel auf A List Apart den man gelesen haben sollte: “Now You See Me“.

Aha -9999em.

So. Schlauer? Wenn man von diesem A-List-Apart-Artikel zurückkommt, weiß man, dass display:none; evil ist und man besser alles mit -9999em zu verstecken hat. Und Tschüß! Man verschiebt als den Text links raus aus dem eigenen Bildschirmbereich. Der Text landet somit irgendwo beim Nachbarn links neben Dir und Du sieht ihn nicht mehr, sondern nur noch das Superlogo. Die Suchmaschine und Screenreader sehen nicht das Logo, sonden lesen die Überschrift aus.

Der Kritikpunkt ist nun, dass man den Nachbarn damit nicht dauernd belasten dürfe. Denn diese -9999em-Box existiert wirklich, bei langen Texten kann der Inhalt theoretisch sagar wieder vom Nachbarn zurück in den eigenen Bildschirm laufen und es ist nicht nur besser für den Nachbarn, sondern auch für die Browerperformance, weil diese Riesenbox nicht erst erzeugt werden muss. Also anders.

Ja. Ich komme zum Punkt!

Sorry. Also hier die neue Lösung namens Kellum Method.

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Die Idee ist nun, den Text nach rechts zu verschieben, aber den Inhalt der Box durch overflow:hidden nicht anzuzeigen. Bei der nächsten Webseite mal ausprobieren und vielleicht zum neuen Standard erheben.

Hier noch der Artikel von Jeffrey Zeldman.

Ähnliche Artikel:

Meta-Daten



Ein Kommentar

Auch mal Kommentieren:

Kommentar