Praxisleitfaden Sprache der Seite
Fehlende Sprachangabe ergänzen
Deutsch lesbar, technisch ohne Sprache: So korrigieren Sie das HTML.
html-has-langWCAG 3.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-html-has-lang.html
Befund verstehen
Der Text ist deutsch. Die Sprachangabe fehlt.
Erkannter Befund
Das fällt auf
html: Das lang-Attribut fehlt am Wurzelelement.So ist es einzuordnen
Die fiktive Ausstellung über Werner Holz enthält deutsche Überschriften und Erläuterungen. Im HTML ist jedoch keine Hauptsprache hinterlegt. Genau diesen fehlenden Eintrag meldet html-has-lang.
Das bedeutet es für die Nutzung
Ohne die Angabe fehlt Screenreadern eine Grundlage für die Auswahl der Sprachregeln. Deutsche Texte können dadurch mit einer unpassenden Stimme oder Aussprache gelesen werden.
- Regel
html-has-lang- Referenz
- WCAG 3.1.1
Gemessener Ausgangszustand
Element: html
HTML: <html>
lang: nicht vorhanden
Axe html-has-lang: VerstoßDokumentsprache je Sprachfassung prüfen
Eine Vorlage kann viele Seiten ohne Sprachangabe ausgeben. Prüfen Sie jede Sprachfassung mit ihrem tatsächlichen Inhalt.
- Ausstellung× Befund im Beispiel
- Werkübersicht× Befund im Beispiel
- Englische Ausstellung Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenLesen Sie lang am veröffentlichten html-Element jeder Sprachfassung aus.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Sprache trägt den Inhalt?
Entscheidend ist die überwiegende Sprache des Dokuments, nicht der Standort des Unternehmens.
Seitenkontext ansehen
Die Markierung steht für das Dokument
Der vollständige Einstieg zeigt die erfundene Ausstellung mit Überschrift, deutschem Begleittext und Archivschrank. Er macht die Wahl der Hauptsprache nachvollziehbar.
Der Rahmen kennzeichnet den Seitenkontext eines unsichtbaren Fehlers. Betroffen ist die Sprachangabe des gesamten Dokuments, nicht die Illustration. Vorher fehlt lang am HTML-Wurzelelement; nachher steht dort lang="de".
Im Dokument ergänzen
Eine Angabe am Anfang des HTML
Ergänzen Sie am vorhandenen html-Element die tatsächliche Hauptsprache. Die Korrektur verändert weder den deutschen Text noch die Gestaltung der Ausstellung.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
lang="de"
Im CMS oder Template Prüfen Sie die Spracheinstellung der veröffentlichten Seitenfassung und das Dokument-Template. Maßgeblich ist das daraus ausgelieferte HTML.
Vollständigen Code vergleichen
Vorher
<!doctype html>
<html>Nachher
<!doctype html>
<html lang="de">Markierte Zeilen wurden geändert
Dauerhaft umsetzen
Die Sprache gehört zur Seitenfassung
Verankern Sie die Korrektur dort, wo das Dokument erzeugt wird.
- 1
Ermitteln Sie für jede Sprachfassung die vorherrschende Inhaltssprache anhand des tatsächlichen Textes.
- 2
Lassen Sie das Dokument-Template den zugehörigen Sprachcode am html-Element ausgeben, auch bei einem direkten Seitenaufruf.
- 3
Prüfen Sie nach einem Sprachwechsel, ob Inhalt und Dokumentsprache zusammen wechseln.
- 4
Kontrollieren Sie veröffentlichte Unterseiten und Fehlerseiten; eine korrekte Startseite deckt andere Dokumente nicht ab.
Fehlversuche vermeiden
Vorhanden allein ist noch nicht richtig
Ein leeres Attribut hinterlassen
lang="" gibt keine Hauptsprache an. Für diesen deutschen Inhalt muss der Wert de enthalten sein.
Nur den Inhaltsbereich markieren
lang="de" an main oder einem Absatz ersetzt den fehlenden Eintrag am html-Element für diese Regel nicht.
Den Code nach dem Land wählen
Die Adresse des Unternehmens bestimmt nicht die Textsprache. Auch eine deutsche Website kann eine englische Seitenfassung ausliefern.
Einen bestandenen Test überdehnen
html-has-lang prüft die vorhandene Angabe. Ob der Sprachcode gültig ist, gehört zu html-lang-valid; ob er zum Inhalt passt, braucht eine inhaltliche Prüfung.
Gleiche Ansicht, eindeutiger HTML-Unterschied
Nach dem Ergänzen von lang="de" meldet Axe für html-has-lang am selben html-Element einen bestandenen Test. Die unveränderten Bildpunkte bestätigen: Diese Korrektur ist im Layout nicht sichtbar.
So prüfen Sie die Korrektur nach
- Am veröffentlichten html-Element den Wert de nachlesen und mit der überwiegenden deutschen Inhaltssprache vergleichen.
- Die Seite erneut mit html-has-lang prüfen und den Befund am Wurzelelement kontrollieren.
- Die Sprachausgabe separat mit einem Screenreader prüfen, einschließlich vorhandener Sprachwechsel.
Belegt ist nur die ergänzte Dokumentsprache und der Re-Test dieser Regel. Die Kalibrierseite enthält weitere Barrieren, darunter aria-hidden am body. Eine korrekte Sprachausgabe ist hier nicht nachgewiesen.
Gemessener Zustand nach der Korrektur
Element: html
HTML: <html lang="de">
lang: de
Axe html-has-lang: bestanden
Sprachausgabe: nicht geprüftPrüfgrenze kennen
Attribut prüfen, Sprache beurteilen
Automatische Strukturprüfung und fachliche Sprachprüfung beantworten unterschiedliche Fragen.
Automatisch prüfbar
- Fehlendes oder leeres lang am HTML-Wurzelelement erkennen.
- Nach der Korrektur dieselbe Regel am selben Dokument erneut ausführen.
- Mit weiteren Regeln ungültige Sprachcodes oder widersprüchliche Sprachattribute erkennen.
Im Kontext zu entscheiden
- Beurteilen, ob der eingetragene Code der tatsächlichen Hauptsprache entspricht.
- Prüfen, welche fremdsprachigen Passagen eine eigene Auszeichnung benötigen.
- Sprachausgabe und Verständlichkeit mit passenden Browser- und Screenreader-Einstellungen erproben.