Mehrsprachige Inhalte kennzeichnen

Problem

Eine Seite ist korrekt als Englisch identifiziert, enthält jedoch ein fremdsprachiges Zitat, einen Namen oder einen Begriff (z. B. einen französischen Buchtitel). Screenreader sprechen diesen Text falsch aus, und Browser wenden möglicherweise falsche Typografie oder Rechtschreibprüfung an, da sie weiterhin davon ausgehen, dass alle Inhalte auf Englisch sind.

Lösung

Umschließen Sie den fremdsprachigen Text mit einem Inline-HTML-Element, wie z. B. einem <span>, und fügen Sie das Attribut lang mit dem entsprechenden Sprachcode hinzu. Dies signalisiert Browsern und assistiven Technologien genau, welche Sprache für diesen spezifischen Textabschnitt verwendet werden soll, ohne die Hauptsprache der Seite zu beeinflussen.

Schritte

1. Mehrsprachige Inhalte identifizieren

Erstellen oder identifizieren Sie zunächst eine Komponente, die Text mit einer fremdsprachigen Phrase anzeigt. In diesem Beispiel enthält eine englische Seite eine französische Phrase.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

Ohne Änderungen versucht ein Screenreader, "C'est la vie" mit englischer Phonetik auszusprechen, was falsch klingt.

2. Fremdsprachigen Text in ein Element einschließen

Ändern Sie die Komponente so, dass die spezifische Phrase in ein <span>-Element eingeschlossen wird. Dies isoliert den Text, sodass Sie ein Attribut darauf anwenden können.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. Das Attribut lang hinzufügen

Fügen Sie das Attribut lang zum <span> mit dem korrekten Sprachcode für diese Phrase hinzu. In diesem Fall ist der Code für Französisch fr.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. Die Komponente auf Ihrer Seite verwenden

Sie können diese Komponente nun auf Ihrer Seite verwenden.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

Wenn ein Screenreader auf das lang="fr"-Attribut trifft, wechselt er zur französischen Sprachausgabe, um die Phrase korrekt auszusprechen. Browser können diesen Hinweis auch nutzen, um französischspezifische Typografie anzuwenden (wie korrekte Anführungszeichen) oder die Phrase von der englischen Rechtschreibprüfung auszuschließen.