Konflikt Barrierefreiheit <-> Googlerichtlinien?

[sol747]

Hallo allerseits!

ich möchte Euch mal um Eure Meinung bitten!

Ich habe nach Anregung durch diesen Thread:
http://forum.de.selfhtml.org/archiv/2004/8/t88476/#m527447

auf meiner Startseite den Mouseover-Effekt bei den Links ohne JS hergestellt.

Konkret sieht das jetzt so aus:

....
a#welcome {
 background-image:url("pics/language/welcome.gif");
}
a#welcome:hover {
 background-image:url("pics/language/mouseover/welcome.gif");
....
span.hidden {
 color:#7F1D2E;
 font-size: 9px;
 padding-bottom: 50px;
}
....
<a href="english/home.html" id="welcome"><span class="hidden">Welcome</span></a>

#7F1D2E ist auch die Hintergrundfarbe der Seite. Soweit so gut, funktioniert jedenfalls.
Jetzt kommen mir aber Bedenken, daß ich mit diesem "Trick", unsichtbaren Text hinzuzufügen (wegen der Barrierefreiheit), die Google-Crawler vergrätze. Auf den Google-Infoseiten für Webmaster steht nämlich:
"Vermeiden Sie verborgenen Text oder verborgene Links."
und weiter:
"Verborgene Links sind Links, die zwar vom Googlebot gecrawlt werden, für Menschen aus folgenden Gründen jedoch nicht lesbar sind:

Der Link besteht aus verborgenem Text - beispielsweise Text, der dieselbe Farbe wie der Hintergrund hat.
Die Hyperlinks werden durch ein CSS so klein gemacht, dass sie für das bloße Auge nicht sichtbar sind.
Der Link verbirgt sich hinter einem kleinen, unauffälligen Zeichen, zum Beispiel einem Bindestrich mitten in einem Abschnitt.
Falls wir davon ausgehen müssen, dass Ihre Website verborgenen Text bzw. verborgene Links zur Täuschung Ihrer Nutzer enthält, kann dies dazu führen, dass Ihre Website aus dem Google-Index entfernt wird....."

Sollte ich also lieber auf dieses Element der Barrierefreiheit verzichten - also den Text im Link einfach weglassen -, um es Google (immerhin sehr wichtig) rechtzumachen?

Schöne Grüße, Martin

[Snafu]

Hallo!
So wie ich das verstehe willst du ein Bild als Link(text) haben. Google, andere Suchmaschinen, Braille-Zeilen, etc. können dies aber schwer darstellen. Deswegen ist es quasi ein Muss, für den Text im Bild bzw für das symbolische Bild noch einen Text für die Braille-Zeile, etc. parat zu haben.

Hoffe ich konnte helfen.

[sol747]

Hallo!

So wie ich das verstehe willst du ein Bild als Link(text) haben.

Genau.

Google, andere Suchmaschinen, Braille-Zeilen, etc. können dies aber schwer darstellen. Deswegen ist es quasi ein Muss, für den Text im Bild bzw für das symbolische Bild noch einen Text für die Braille-Zeile, etc. parat zu haben.

Ich habe ja Text innerhalb des <a></a>. Genau den Text, der auch vom Bild dargestellt wird. Ein Bild soll es - normalerweise - sein, um eine bestimmte Schriftart zu verwenden. (Mit den ca. vier Schriftarten, die jeder Internetanwender zur Verfügung hat, kommt das Design hier nicht klar)
Plain Text soll hier eigentlich nur als Alternative dienen, wann immer das Bild nicht angezeigt werden kann. Das Problem ist aber, daß der Plain Text im Normalfall das Erscheinungsbild stören würde.

Ist es vielleicht besser, oder gar unumgänglich, statt Plain Text im <a></a> tag eine Fußzeile mit kleinen Zusatz-Links einzubauen?

Schönen Gruß, Martin

[Felix Riesterer]

Lieber sol747,

was hindert Dich eigentlich an dieser Konstruktion?

<a href="xyz.html"><img src="mouseout.png" alt="guter Linktext" /></a>

Vielleicht kann man beim Hovern das Bild auf visibility:hidden und den Hintergrund wie bisher auf das gehoverte Bild setzen?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[sol747]

Hallo Felix,
vielen Dank für diesen Vorschlag, er sieht wirklich unkompliziert aus.

was hindert Dich eigentlich an dieser Konstruktion?

<a href="xyz.html"><img src="mouseout.png" alt="guter Linktext" /></a>

Vielleicht kann man beim Hovern das Bild auf visibility:hidden und den Hintergrund wie bisher auf das gehoverte Bild setzen?

Leider funktioniert er aber anscheinend nicht so richtig. Nach Ausprobieren glaube ich, daß visibility:hidden alles unsichtbar macht, auch das Hintergrundbild.
Oder ich hab mal wieder irgendwo nen Bug drin, den ich nicht sehe....  :

a {
 display: block;
 height: 60px;
 width: 160px;
 text-decoration: none;
 outline: 0;
}
a#willkommen {
 background-image:url("pics/language/mouseover/willkommen.gif");
}  /* könnte man wahrscheinlich weglassen */

a#willkommen:hover {
 visibility: hidden;
 background-image: url("pics/language/mouseover/willkommen.gif");
}
<a href="deutsch/home.html" id="willkommen"><img src="pics/language/willkommen.gif" alt="Willkommen"></a>

Oh je, wenn ich das wirklich "auskochen" will, werd ich wahrscheinlich Ulrich's Lösung studieren müssen (vielen Dank übrigens, schrecke nur etwas vor der Komplexität zurück, reine Zeitfrage momentan)...

Gruß, Martin

[barriere]

Sollte ich also lieber auf dieses Element der Barrierefreiheit verzichten - also den Text im Link einfach weglassen -, um es Google (immerhin sehr wichtig) rechtzumachen?

Wen kümmert dabei google?
Käme ich, der Modem-geplagt die Darstellung von Bildern in der Regel deaktiviert hat, auf deine Seite wäre dort keine Navigation zu finden.
Du müsstest mir schon im Text viel versprechen, damit ich die Mühe auf mich nehme, den Bits und Bytes beim Klettern durch die Telefonleitung zuzuschauen, bis ich die Bilder sehe.

[Siechfred]

Hey Anonymer.

Bitte entscheide Dich für einen Nick, sog. Sockenpuppen sind hier nicht gern gesehen (Verhaltensrichtlinien für alle Poster).

Vielen Dank!
Siechfred

[barriere]

Bitte entscheide Dich für einen Nick, sog. Sockenpuppen sind hier nicht gern gesehen (Verhaltensrichtlinien für alle Poster).

wenn ich die Definition für "Sockenpuppen" bei Wikipedia recht verstehe - sprich: verschiedene Nicks um verschiedene Standpunkte im selben Thread unterzubringen - fall ich nicht darunter.

Wo ist also das Problem?

[Siechfred]

Wo ist also das Problem?

Dass es hier im Forum in der Vergangenheit Probleme mit Teilnehmern gab, die unter verschiedensten Nicks auftraten und so für Unruhe gesorgt haben. Aus diesem Grund möchten die Betreiber dieses Forums, dass sich diejenigen, die in diesem Forum posten, für einen Nick entscheiden, den sie bei ihren Aktivitäten hier beibehalten.

Meine Bitte an Dich deshalb: entscheide Dich einfach für einen Nick und damit ist alles in Ordnung. Im Übrigen solltest Du Dir die Vorteile der Registrierung mal anschauen, ist gar nicht so verkehrt :)

Siechfred

[Patrick Andrieu]

Hallo barriere!

Wo ist also das Problem?

Ergänzend zu Siechfred, habe ich es Dir hier erklärt. Du gibst wirklich gute Antworten und es wäre schade, wenn Leser dann im Archiv nach einem Verfasser »barriere« suchen, weil die sich dran erinnern, dass dieser »barriere« schon mal geholfen hat, in der Hoffnung, mehr gute Tipps von ihm zu finden.

Viele Grüße aus Frankfurt/Main,
Patrick

[Antipitch]

Hi Martin,

Sollte ich also lieber auf dieses Element der Barrierefreiheit verzichten - also den Text im Link einfach weglassen -, um es Google (immerhin sehr wichtig) rechtzumachen?

auf keinen Fall:

1. Google ist nicht Gott und entscheidet wer was sehen darf (auch wenn Witschaftlichkeit/ Barrierefreiheit für Webdeveloper oft zur Gratwanderung wird).

2. Meint Google hiermit halbseidene Maßnahmen zu dem Zweck, deine User oder den Bot irrezuführen (z.B. jede Menge "unsichtbare" interne Links, um dein Google Pageranking zu erhöhen). Diese Absicht liegt bei dir nicht vor, eher das Gegenteil.

3. Verbesserungsvorschlag für dich:

• Nimm nicht zwei Bilder sondern eins mit doppelter Höhe (beide Grafiken untereinander) und verschieb per hover die Hintergrundposition. Dann brauchst du das Bild nicht per JS vorzuladen.

• Lass das span und farbangaben etc. weg und gib dem <a> einfach ein text-indent von -9999px.

Google Bot sieht dann dasselbe wie der (normale) User, halt nur Text anstatt Bilder (das text-indent sieht er nicht).

Gruß
Antipitch

[sol747]

Hi Antipitch,

vielen Dank für Deine Antwort!

2. Meint Google hiermit halbseidene Maßnahmen zu dem Zweck, deine User oder den Bot irrezuführen (z.B. jede Menge "unsichtbare" interne Links, um dein Google Pageranking zu erhöhen). Diese Absicht liegt bei dir nicht vor, eher das Gegenteil.

Ich war halt nur in Sorge, daß der Crawler mich automatisch mit den "halbseidenen" Sites in einen Topf wirft, sobald er auf einen versteckten Text stößt.
Oder werden Indexausschlüsse immer von Hand vorgenommen?

• Lass das span und farbangaben etc. weg und gib dem <a> einfach ein text-indent von -9999px.

Google Bot sieht dann dasselbe wie der (normale) User, halt nur Text anstatt Bilder (das text-indent sieht er nicht).

Die Idee scheint zu funktionieren. Prima! Werde es so machen.
Vielen Dank -
Martin

[CarstenP]

Hallo zusammen,

• Lass das span und farbangaben etc. weg und gib dem <a> einfach ein text-indent von -9999px.

Da hier von Barrierefreiheit die Rede ist: Ich hoffe, Euch ist klar, wie sich diese beiden Image-Replacement-Techniken (und viele andere auch) in einem CSS-fähigen Browser auswirken, in dem das Bilder-Laden abgeschaltet ist ... ;-)

Viele Grüße
Carsten

[CarstenP]

Nochmal hallo,

Da hier von Barrierefreiheit die Rede ist: Ich hoffe, Euch ist klar, wie sich diese beiden Image-Replacement-Techniken (und viele andere auch) in einem CSS-fähigen Browser auswirken, in dem das Bilder-Laden abgeschaltet ist ...

Ich hatte Ulrichs Beitrag irgendwie übersehen. Er hat bereits treffend zusammengefaßt, was ich aussagen wollte ...

Viele Grüße
Carsten

[molily]

Hallo,

Das Thema wurde schon öfters diskutiert, meines Wissens wird die potenzielle Gefahr viel zu hoch gekocht. Tausende Sites verwenden versteckte Links zur Verbesserung der Barrierefreiheit. Das ist empfohlen und erprobt, und ich habe noch nie gehört, dass eine Site deshalb aus dem Google-Index geflogen ist. Ich denke mal, Google weiß selbst von der Problematik und deren Tools zum Aufspüren grober Fälschungsversuche sind nicht so scharf gestellt. Ich persönlich habe mir da nie Sorgen gemacht und habe auch keine negativen Erfahrungen damit gemacht.

Mathias

[Ulrich]

Moin,

Bei meiner Seite stand ich vor einem ganz ähnlichen Problem, da ich die Hauptlinks auch mit grafischen Buttons darstellen wollte.
Zur Lösung dieses Problems hat mir das Googeln nach "image replacement" weitergeholfen.
Aus den dort erhaltenen Informationen habe ich mir dann eine für mich sehr praktikabele Lösung zusammengestellt, die ich auch dokumentiert habe.
Wie diese Lösung funktioniert ist hier genau erkärt:
Tutorial

Sollte ich also lieber auf dieses Element der Barrierefreiheit verzichten - also den Text im Link einfach weglassen -, um es Google (immerhin sehr wichtig) rechtzumachen?

Dem würde ich auf jeden Fall widersprechen, was auch der allgemeine Tenor der Posts hier ist. Im Gegenteil würde ich zudem versuchen, den Inhalt, in diesem Fall den Linktext, auch in dem Fall bereitzutellen, dass zwar das CSS, aber keine Bilddateien geladen werden (Das sprach für mich damals gegen die Lösung mit text-indent oder mittels position:absolute den Text aus dem Fenster zu "schieben").
Es mag zwar nicht für den Grossteil der Besucher zutreffen, aber wenn es mal mit dem Laden schnell gehen soll, schalte ich hin und wieder das Laden von Bildern aus, lasse das CSS aber aktiv. Manchmal mit ernüchternden Resultaten...

mit freundlichen Grüßen
Ulrich