Zweiter Blick: Sprache der Zielseite
Sprachkennzeichnungen
Turm von Babylon

hreflang: Hinweis auf Sprache der Zieldatei

In HTML kann technisch über die Sprache der Zielseite eines Links informiert werden. Es steht dafür das hreflang-Attribut zur Verfügung. Das Attribut ist rein informativ und hat keinerlei Auswirkungen auf die Darstellung nach dem Anklicken des Links.

Leider wird das Attribut von Screen Readern noch nicht unterstützt. Dabei ist es ein kleines Rädchen, mit dem das Surfen zu mehrsprachigen Inhalten automatisiert erleichtert werden könnte.

Relevanz für Barrierefreiheit und Usability

Suchmaschinen und hreflang

Wenn ein Gleis schon für Suchmaschinen gelegt wurde, sollte es auch von Screen Readern befahren werden.

Der Suchausdruck hreflang in Suchmaschinen liefert ganz prominent Ergebnisse zum Thema Suchmaschinen und hreflang. Dies führt leider vielfach zu der irreführenden Annahme, das Attribut sei zur Suchmaschinenoptimierung (SEO) gedacht.

Es mag sein, dass Suchmaschinen auf ihre eigene Weise das Attribut und dessen Wert verwenden. Für die Suchmaschine wertvoller ist jedoch die Kennzeichnung der natürlichen Sprache im Dokument selbst und nicht im Link zum Dokument.

Aus der Perspektive der Barrierefreiheit steht jedenfalls fest:

  1. Egal, was Suchmaschinen mit dem Attribut machen. Screen Reader müssen technisch verfügbare Informationen in einer angemessenen Weise darstellen.
  2. Egal mit welcher Absicht das Attribut eingesetzt wurde. Je öfter es korrekt eingesetzt wird, desto öfter stellt es einen interessanten Hinweis bei der Nutzung eines Screen Readers dar.

HTML Umsetzung

Das Attribut hreflang kann in den Elementen <a>, <area> und <link> angewendet werden.

Das Element wird einfach mit dem Wert für die Sprache der Zielseite ergänzt:

<a
  href="https://english-page.uk"
  hreflang="en"
>
  Page in English 
</a>

CSS Darstellungsmöglichkeiten

Auf das Attribut hreflang und dessen Wert kann in CSS zugegriffen werden, um etwa visuell ein Icon zu platzieren, das die Fremdsprache verdeutlicht. Eine CSS-Klasse zum Platzieren eines visuellen Indikators ist dann nicht mehr nötig.

Codebeispiel

Im folgenden CSS-Code wird für alle Links mit dem Attribut hreflang für englischsprachige Zielseiten eine Hintergrundgrafik vorangestellt:

a[hreflang="en"] { 
  background-image: url('english_icon.png');
  background-repeat: no-repeat;
  display: block; 
  padding-left: 36px;
}

Visuelles Ergebnis

Page in English

Anmerkungen zum Codebeispiel

Unterstützung durch Browser und Screen Reader

Der Browser Support ist sehr gut:

Screen Reader Darstellung

Zu meiner Überraschung ignorieren JAWS und NVDA das Attribut bislang gänzlich (Stand Februar 2022).

Ich habe in der Zwischenzeit die JAWS-Entwicklung kontaktiert und für NVDA eine Fehlermeldung deponiert: