Sprache der Seite und fremdsprachiger Passagen auszeichnen

Worum es geht

Screenreader und Vorlesefunktionen wählen anhand des lang-Attributs die Aussprache. Fehlt es oder steht dort die falsche Sprache, wird ein deutscher Text zum Beispiel mit englischer Aussprache vorgelesen und ist kaum zu verstehen. Das passiert in Shops häufig, wenn ein Theme ursprünglich englisch war und lang="en" im Code stehen geblieben ist. WCAG 3.1.1 verlangt, dass die Hauptsprache der Seite im Code angegeben ist. Nach 3.1.2 (Stufe AA) werden auch Passagen in einer anderen Sprache ausgezeichnet.

Wen es betrifft

• Blinde und sehbehinderte Menschen, die Screenreader wie NVDA, JAWS oder VoiceOver nutzen. Viele Screenreader wechseln automatisch die Sprachausgabe, wenn das lang-Attribut es vorgibt.
• Menschen mit Leseschwierigkeiten, die sich Texte vom Browser oder einer Vorlese-Erweiterung vorlesen lassen.

So behebst du es

1. Hauptsprache am <html>-Element setzen. Für eine deutschsprachige Seite reicht de. Eine Regionalangabe wie de-DE oder de-AT ist ebenfalls gültig.

   Schlecht:

   <!DOCTYPE html>
   <html>
   

   Ebenfalls schlecht, wenn der Inhalt deutsch ist:

   <html lang="en">
   

   Gut:

   <!DOCTYPE html>
   <html lang="de">
   

2. Gültige Sprachcodes verwenden. Erlaubt sind Codes nach BCP 47, etwa de, en, fr, en-GB. Werte wie german, de_DE mit Unterstrich oder ein leeres lang="" erkennt der Screenreader nicht.

3. Mehrsprachige Shops: Jede Sprachversion bekommt ihren eigenen Code. Die englische Version deines Shops hat <html lang="en">, die deutsche <html lang="de">. Prüfe, ob dein Shopsystem das beim Sprachwechsel automatisch umstellt.

4. Fremdsprachige Passagen auszeichnen (3.1.2). Ein englisches Zitat, ein französischer Produktname als ganzer Satz oder ein Kundenbewertungstext auf Englisch bekommt ein eigenes lang.

   <p>Der Hersteller beschreibt die Jacke so:
     <q lang="en">Built for wind, rain and everything in between.</q>
   </p>
   
   <blockquote lang="fr">
     <p>Un café doux et équilibré.</p>
   </blockquote>
   

5. Nicht jedes Fremdwort auszeichnen. WCAG nimmt Eigennamen, Fachbegriffe, Wörter unbestimmter Sprache und Wörter aus, die Teil der umgebenden Sprache geworden sind. "Newsletter", "Online-Shop" oder ein Markenname brauchen kein eigenes lang.

6. Sprachauswahl-Links: Wenn deine Sprachauswahl die Sprachnamen in ihrer eigenen Sprache zeigt, zeichne sie entsprechend aus. Mit hreflang gibst du zusätzlich die Sprache der Zielseite an.

   <nav aria-label="Sprache wählen">
     <ul>
       <li><a href="/de/" hreflang="de" lang="de">Deutsch</a></li>
       <li><a href="/en/" hreflang="en" lang="en">English</a></li>
       <li><a href="/fr/" hreflang="fr" lang="fr">Français</a></li>
     </ul>
   </nav>
   

7. XHTML und xml:lang: Wenn du zusätzlich xml:lang verwendest, muss es denselben Wert haben wie lang.

So prüfst du es

1. Quelltext ansehen: Öffne die Seite, drücke Strg + U (Mac: Cmd + Option + U) und suche ganz oben nach <html lang="...">. Steht dort die richtige Sprache?
2. Browser-Devtools: Wähle im Bereich "Elements" das <html>-Element aus und prüfe das Attribut. Prüfe auch, ob dein Shop beim Sprachwechsel den Wert ändert.
3. axe DevTools meldet ein fehlendes lang (html-has-lang), ungültige Codes (html-lang-valid, valid-lang) und abweichende xml:lang-Werte (html-xml-lang-mismatch). Ob die angegebene Sprache zum Inhalt passt, prüft das Tool nicht.
4. WAVE-Erweiterung zeigt "Language missing or invalid" als Fehler und nennt im Reiter "Details" die erkannte Sprache.
5. Screenreader: Lass dir die Seite mit NVDA oder VoiceOver vorlesen. Klingt der deutsche Text deutsch? Wechselt die Aussprache bei ausgezeichneten fremdsprachigen Passagen? Dafür muss die entsprechende Stimme installiert sein.

Mehr dazu

• W3C: Understanding 3.1.1 Language of Page
• W3C: Understanding 3.1.2 Language of Parts
• W3C Technique H57: lang am html-Element
• W3C Technique H58: Sprachwechsel mit lang auszeichnen