Page-level accessibility: What language does your page speak?

Relevante Success Criteria

SC 3.1.1 Language of Page (Level A)
The default human language of each Web page can be programmatically determined.

Screenreader lesen den Text der Seite vor – und dazu müssen sie wissen, in welcher Sprache der Text geschrieben ist. In der Regel können Screenreader die Sprache aus dem <lang>-Attribut des <html>-Elements entnehmen. Ist dort keine Sprache angegeben, versuchen Screenreader, die Sprache zu erraten; typischerweise greifen sie auf die Systemeinstellungen des Benutzers (bzw. auf die des Browsers) zurück.

Wenn im <html>-Element keine Sprache definiert ist und die Sprache im Betriebssystem auf Englisch gestellt ist, dann geht der Screenreader davon aus, dass die Website auf englisch ist und liest sie entsprechend vor. Das muss aber nicht unbedingt stimmen ...

<html lang="en">
<!-- en = (primary) language subtag -->
<html lang="en-gb">
<!-- gb = language region subtag (nur verwenden, wenn 
explizit zur Unterscheidung nötig!) -->

Automatisierte Accessibility Checker prüfen, ob das Tag vorhanden ist bzw. ob es leer ist, können aber nicht erkennen, ob die richtige Sprache gesetzt ist. Daher führt auch hier kein Weg an einer manuellen Prüfung vorbei.

Screenreader Language Support

Alle modernen Screenreader unterstützen verschiedene Sprachen. Manchmal müssen Sprachpakete zusätzlich manuell installiert werden.

Wenn es doch nicht funktioniert ... Wenn der Screenreader bei einer mehrsprachigen Seite nicht automatisch auf die im Dokument definierte Sprache wechselt, dann muss möglicherweise eine andere text-to-speech engine gewählt werden.
Für NVDA funktioniert das so: Menü > Optionen > Einstellungen > Sprachausgabe (links):
Sprachausgabe > Sprachausgabe ändern > andere Engine aus der Liste auswählen
Sprache/Dialekt automatisch wechseln sollte angehakt sein.
Die Stimme kann auch verändert werden.

Multilingual content

Relevante Success Criteria

SC 3.1.2 Language of Parts (Level AA)
The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Das <lang>-Attribut im <head>-Element wird an alle Elemente im Dokument vererbt. Es kann aber über ein weiteres <lang>-Attribut für anderssprachige Teile überschrieben werden:

<p lang="fr">La langue humaine da chaque passage ou phrase du contenu ...</p>

Screenreader können dann den Inhalt richtig ausgesprochen vorlesen. Sehr gebräuchliche Wörter sind davon ausgenommen, z.B. Croissant, Cappuccino, etc.

Weitere Vorteile, abgesehen von a11y

  • Mit manchen Suchmaschinen kann die Suche auf Seiten in der Sprache des Benutzers beschränkt werden
  • Rechtschreib- und Grammatikprogramme müssen ebenfalls wissen, in welcher Seite die Sprache verfasst ist, ebenso Übersetzungsprogramme.
  • Das <lang>-Attribut aktiviert automatische Übersetzungsprogramme, die in einigen Browsern eingebaut sind.
  • Browser benötigen die Spracheinstellung, um die Silbentrennung richtig anzuzeigen, wenn die CSS-Eigenschaft hyphens benutzt wird.
  • Ebenso hängt die Interpunktion von der korrekten Einstellung ab, z.B. Anführungszeichen, die in verschiedenen Sprachen anders gesetzt werden.

Auch Zahlen, Datum und Formulare werden vom <lang>-Attribut beeinflusst, was einen direkten Einfluss auf die Usability der Formulare hat.

Styling content based on its language

Inhalte können mit der :lang(en) Pseudoklasse gestylt werden.

Links