Das lang-Attribut und Screenreader
Geben Sie die Sprache von Seite und Elementen an, damit sie korrekt ausgesprochen werden
Das lang-Attribut und Screenreader ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Funktion des lang-Attributs
Das Attribut lang gibt die Sprache des Inhalts eines Elements mithilfe eines BCP-47-Sprachtags an. Screenreader verwenden es, um die passende Aussprache-Engine und Stimme auszuwählen, und Suchmaschinen nutzen es zur sprachabhängigen Indexierung.
Am html-Element festlegen
Jede Seite muss ihre Hauptsprache am Wurzelelement angeben: <html lang="en"> für Englisch, <html lang="tr"> für Türkisch, <html lang="ja"> für Japanisch. Ohne diese Angabe greifen Screenreader auf die Systemstandardsprache des Benutzers zurück und sprechen oft jedes Wort falsch aus.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>...</title></head>BCP-47-Tags
Tags folgen BCP-47: Sprachcode (en, tr, ja), optional eine Region (en-US, en-GB, zh-Hant, zh-Hans) und nur selten ein Schriftsystem. Verwenden Sie den genauesten zutreffenden Tag; „en“ allein genügt, wenn die regionale Schreibweise keine Rolle spielt.
Sprachwechsel in der Seitenmitte
Markieren Sie einen Abschnitt in einer anderen Sprache mit einem eigenen lang-Attribut: <blockquote lang="fr">Bonjour</blockquote>. Der Screenreader wechselt für diesen Abschnitt die Stimme und erzeugt dadurch auch auf mehrsprachigen Seiten eine korrekte Aussprache.
<p>The motto is <span lang="la">Carpe diem</span>, meaning "seize the day".</p>CSS-Sprachselektoren
CSS kann über :lang(en) auf eine Sprache zielen: blockquote:lang(fr)::before { content: "« "; }. Der Selektor entspricht dem lang-Attribut des nächsten übergeordneten Elements. Verwenden Sie ihn für typografische Konventionen wie Anführungszeichen und Abstände, die je nach Sprache variieren.
Warum das für die Aussprache wichtig ist
„Live“ wird im Englischen und Französischen unterschiedlich ausgesprochen. „Wir“ wird im Deutschen wie „veer“ ausgesprochen, nicht wie „wear“. Ein auf Englisch konfigurierter Screenreader spricht beides falsch aus, wenn er nicht erfährt, dass der umgebende Abschnitt Deutsch oder Französisch ist.
hreflang für verknüpfte Sprachen
Das hreflang-Attribut von Links (<a href="/fr/" hreflang="fr">Français</a>) teilt Suchmaschinen und unterstützenden Technologien die Sprache der verknüpften Seite mit. Kombinieren Sie es mit seitenweiten hreflang-Link-Tags für eine vollständige internationale SEO-Abdeckung.
Sprache des Benutzers erkennen
JavaScript kann die bevorzugten Sprachen des Benutzers über navigator.languages auslesen (ein Array von BCP-47-Tags in Prioritätsreihenfolge). Verwenden Sie es, um ein Standardgebietsschema auszuwählen oder einen Sprachwechsel vorzuschlagen – berücksichtigen Sie jedoch immer eine ausdrückliche Auswahl des Benutzers gegenüber der Browsersprache.
Erkennung auf dem Server
Der HTTP-Anfrage-Header Accept-Language listet die Spracheinstellungen des Benutzers aus der Browserkonfiguration auf. Verwenden Sie ihn auf dem Server, um bereits bei der ersten Anfrage das passende lokalisierte HTML zu senden, sodass der Benutzer seine Sprache sieht, bevor JavaScript ausgeführt wird.
Mehrere Sprachen auf einer Seite
Wikipedia-Artikel, Sprachlern-Apps und Wörterbücher mischen routinemäßig mehrere Sprachen. Markieren Sie jede Passage mit einem eigenen lang-Attribut, auch kurze Passagen. Ohne ein lang-Attribut pro Abschnitt fallen die Screenreader-Stimme und die CSS-Anführungszeichen auf den Standard der Seite zurück.
Häufige Fehler
Ein fehlendes lang bei <html> (sehr häufig), ein falscher Sprachcode (lang="english" statt lang="en") oder die Verwendung regionaler Codes, obwohl die Sprache allein ausreicht. Verwenden Sie den W3C-Validator und das Lighthouse-Barrierefreiheitsaudit, um diese Fehler in CI zu erkennen.
Wissensabfrage
Warum ist das lang-Attribut bei für Screenreader-Benutzer besonders wichtig?
Zusammenfassung
Geben Sie die Seitensprache bei <html> mit einem BCP-47-Tag an (en, tr, ja, zh-Hant). Markieren Sie Sprachwechsel in der Seitenmitte mit lang-Attributen an span- oder section-Elementen, damit Screenreader die Stimme wechseln. Mit CSS :lang() können Sie sprachspezifische Typografie anwenden. Setzen Sie lang immer – es kostet nichts und verbessert die Aussprache durch Screenreader, SEO und CSS-Auswahl erheblich.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Das lang-Attribut und Screenreader“ kostenlos?
Ja — der vollständige Text von „Das lang-Attribut und Screenreader“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das lang-Attribut und Screenreader“?
Geben Sie die Sprache von Seite und Elementen an, damit sie korrekt ausgesprochen werden Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Das lang-Attribut und Screenreader“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das lang-Attribut und Screenreader
- dir=rtl für Text von rechts nach links
- Die Elemente bdi und bdo
- charset und Unicode: Sonderzeichen verarbeiten