Hover mit Fähnchen

Thema:

Gerade ging mir durch den Kopf, dass man ja, wenn man einen Link schreibt, in den Attributen durchaus mit angeben kann, in welcher Sprache das Ziel dieses Links gehalten ist. Dazu gibt es das Attribut hreflang. Ein Link auf das US-Google würde dann so aussehen:

<a href="http://google.de" hreflang="en-us">US-Google</a>

Der Sprachcode richtet sich dabei nach ISO 639-1. Die Frage nach dem Sinn liegt natürlich auf der Hand: das W3C schreibt dazu:

If you add some text or graphic to a link indicating that the target document is in another language, it may allow the reader to decide in advance whether or not to follow the link, according to their language skill. If the user has to waste time following the link to find out that they cannot read the target document, this introduces fatigue, and they may lack confidence when faced with links that actually do go to readable pages.

Das würde natürlich nur Sinn machen, täte der Webbrowser anzeigen, welche Sprache den geneigten Leser denn nun erwartet. Macht aber kein mir bekannter Browser von alleine. Mit ein wenig CSS kann man ihn aber dazu überreden. Beispielsweise so:

a[hreflang='en']:hover {
   padding-right: 18px;
   background: transparent url(flags/gb.gif) no-repeat center right;
}

a[hreflang='en-us']:hover {
   padding-right: 18px;
   background: transparent url(flags/gb.gif) no-repeat center right;
}

a[hreflang='fr']:hover {
   padding-right: 18px;
   background: transparent url(flags/fr.gif) no-repeat center right;
}

a[hreflang='nl']:hover {
   padding-right: 18px;
   background: transparent url(flags/nl.gif) no-repeat center right;
}

Links mit den Sprachcodes von englisch, amerikanisches englisch, französisch und holländisch bekommen nun beim hovern ein nettes Fähnchen angezeigt. Die Fahnen gibt’s für lau bei FamFamFam zu laden, freundlicherweise. Natürlich passen die Landesfahnen nicht immer zur Sprache und umgekehrt, aber der Benutzer versteht’s sicherlich trotzdem…

BTW: Man sollte natürlich seinen Content insgesamt sprachlich identifizieren, bspw. durch die Angabe der Spache im -Tag, ungefähr so <html lang="de">. Und wenn man dann fremdsprachlich Texte verwendet identifiziert man diese widerum, bspw. mit einem lang-Attribut in einem Absatz: <p lang="en">This is englisch</p>. Der eine oder andere Screenreader soll diese Auszeichnugen tatsächlich beachten können und beim Vorlesen den richtigen Akzent auswählen.

Noch keine Kommentare.

Datenschutzhinweis

Daten die in dieses Formular eingegeben werden, werden mit Hilfe des Dienstes welcomments.io verarbeitet. Dabei fallen die in der Datenschutzerklärung dieses Dienstes aufgeführten Daten (IP-Adresse, Browserversion) an, die dort auch gespeichert werden. Gebe keine persönlichen Daten in dieses Formular ein, im Zweifelsfall nutze einen Spitznamen, alles eingegebene wird hier öffentlich angezeigt. Es werden keine Cookies gespeichert, lediglich der Kommentartext wird im Localstorage des Browsers zwischengespeichert.

GitHub-flavored Markdown und einfache HTML-Tags werden unterstützt.

Hinweis…

Diese Seite enthält Videos von Youtube. Diese sind standardmäßig deaktiviert. Falls Du unten auf „Ja“ klickst, werden Daten von Youtube auf Deinen Rechner geladen und so mindestens Deine IP-Adresse an Youtube weiter gegeben. Cookies werden nicht verwendet. Mehr Infos.

Möchtest du Youtube auf dieser Seite aktivieren?