Markierung von mehrsprachigen Inhalten

Problem

Eine Seite wird 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 könnten falsche Typografie oder Rechtschreibprüfung anwenden, da sie weiterhin davon ausgehen, dass der gesamte Inhalt Englisch ist.

Lösung

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

Schritte

1. Gemischtsprachigen Inhalt 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 wird ein Screenreader versuchen, "C'est la vie" mit englischer Phonetik auszusprechen, was falsch klingt.

2. Den fremdsprachigen Text in ein Element einschließen

Modifizieren Sie die Komponente, um die spezifische Phrase in ein <span>-Element einzuschließen. 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 lang-Attribut hinzufügen

Fügen Sie dem <span> das lang-Attribut 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. Verwenden Sie die Komponente auf Ihrer Seite

Sie können diese Komponente jetzt 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 Attribut lang="fr" trifft, wechselt er zu seiner französischen Stimme, um den Satz korrekt auszusprechen. Browser können diesen Hinweis auch nutzen, um französische Typografie (wie korrekte Anführungszeichen) anzuwenden oder den Satz von der englischen Rechtschreibprüfung auszuschließen.