`hreflang`: Hinweis auf Sprache der Zieldatei

23. Februar 2022

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 Useability

Die Information ist mit dem Link selbst verbunden. Bei mangelnden Sprachkenntnissen kann auf einen Klick verzichtet werden.
Die Information kann visuell zentral über CSS-Anweisungen festgelegt werden. Das Erscheinungsbild wird dadurch über den Webauftritt hin vereinheitlicht.
Screen Reader könnten die Information technisch verarbeiten. Dies würde zu einer vereinheitlichten Darstellung über einen einzelnen Webauftritt hinaus führen.

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:

Egal, was Suchmaschinen mit dem Attribut machen. Screen Reader müssen technisch verfügbare Informationen in einer angemessenen Weise darstellen.
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

Mit background-image: url wird auf die Hintergrundgrafik referenziert.
Bei Inline Links muss display: block entfallen.
Der Wert von padding-left entspricht der Breite der Hintergrundgrafik + noch ein bisschen.

Unterstützung durch Browser und Screen Reader

Der Browser Support ist sehr gut:

Can I use | HTML element: a: hreflang

Screen Reader Darstellung

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

Testdatei: HTML Attribut hreflang und Screen Reader

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

GitHub | hreflang support #13365