Wie man gemischtsprachige Inhalte in React Router v7 kennzeichnet

Problem

Wenn eine Seite Text in mehreren Sprachen enthält, gehen Browser und assistive Technologien davon aus, dass der gesamte Inhalt die deklarierte Sprache der Seite verwendet. Ein für Englisch konfigurierter Screenreader wird versuchen, französische Phrasen, spanische Buchtitel oder deutsche Namen mit englischer Phonetik auszusprechen, was für Nutzer, die auf Audio angewiesen sind, unverständliche Ausgaben erzeugt. Browser wenden Rechtschreibprüfungs- und Typografieregeln basierend auf der Seitensprache an, markieren fremdsprachige Wörter fälschlicherweise als Fehler und behandeln sprachspezifische Zeichensetzung falsch. Suchmaschinen und Übersetzungstools können gemischtsprachige Inhalte ohne explizite Sprachmarkierungen nicht korrekt verarbeiten.

Dies betrifft nicht nur Screenreader-Nutzer, sondern jeden, der Browser-Funktionen verwendet, die von der Spracherkennung abhängen, einschließlich automatischer Übersetzung, Text-zu-Sprache und Lesemodus.

Lösung

Umschließen Sie fremdsprachigen Text mit HTML-Elementen, die ein lang-Attribut mit dem korrekten Sprachcode haben. Das lang-Attribut weist Browser und assistive Technologien an, die Sprachregeln für diesen spezifischen Inhalt zu wechseln, was die korrekte Aussprache durch Screenreader und angemessene Rechtschreibprüfung und Typografie durch Browser gewährleistet.

Verwenden Sie semantische HTML-Elemente wie <span> oder <i>, um fremdsprachigen Inline-Text zu umschließen, ohne das Layout zu stören. Das lang-Attribut akzeptiert ISO 639-1 Sprachcodes (wie fr für Französisch oder es für Spanisch) und optionale Regionscodes für dialektspezifische Behandlung.

Schritte

1. Erstellen Sie eine Komponente zur Markierung fremdsprachiger Texte

Bauen Sie eine wiederverwendbare Komponente, die Text in einem span-Element mit dem entsprechenden lang-Attribut umschließt.

type ForeignTextProps = {
  lang: string;
  children: React.ReactNode;
};

export function ForeignText({ lang, children }: ForeignTextProps) {
  return <span lang={lang}>{children}</span>;
}

Diese Komponente akzeptiert einen Sprachcode und umschließt ihre Children in einem span mit dem lang-Attribut, wodurch Screenreader die Ausspracheregeln für den eingeschlossenen Text wechseln können.

2. Verwenden Sie die Komponente, um fremdsprachigen Inline-Text zu kennzeichnen

Umschließen Sie fremdsprachige Wörter oder Phrasen in Ihrem Inhalt mit der ForeignText-Komponente.

export default function ArticlePage() {
  return (
    <article>
      <h1>Internationale Küche</h1>
      <p>
        Das Signature-Gericht des Restaurants ist{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, eine klassische französische
        Zubereitung, die perfekt zum hauseigenen Wein passt.
      </p>
      <p>
        Ihre Dessertkarte bietet{" "}
        <ForeignText lang="es">tres leches</ForeignText> und{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

Screenreader werden nun "coq au vin" mit französischer Phonetik, "tres leches" mit spanischer Phonetik und "tiramisu" mit italienischer Phonetik aussprechen, während der umgebende deutsche Text mit deutscher Aussprache vorgelesen wird.

3. Kennzeichnen Sie längere fremdsprachige Passagen

Für mehrere fremdsprachige Sätze wenden Sie das lang-Attribut direkt auf Block-Level-Elemente an.

export default function QuotePage() {
  return (
    <article>
      <h1>Allgemeine Erklärung der Menschenrechte</h1>
      <h2>Artikel 1</h2>
      <blockquote lang="fr">
        <p>
          Tous les êtres humains naissent libres et égaux en dignité et en
          droits. Ils sont doués de raison et de conscience et doivent agir les
          uns envers les autres dans un esprit de fraternité.
        </p>
      </blockquote>
    </article>
  );
}

Durch die Anwendung von lang auf das blockquote-Element wird das gesamte Zitat als französisch markiert, was die korrekte Aussprache und Typografie für die gesamte Passage sicherstellt.

4. Kombination mit übersetzten UI-Texten

Wenn Sie fremdsprachige Inhalte zusammen mit übersetzten Interface-Texten anzeigen, verwenden Sie react-intl für UI-Elemente und lang-Attribute für nutzergenerierte oder zitierte Inhalte.

import { FormattedMessage } from "react-intl";
import { ForeignText } from "~/components/ForeignText";

export default function BookReview() {
  return (
    <article>
      <h1>
        <FormattedMessage id="review.title" defaultMessage="Book Review" />
      </h1>
      <p>
        <FormattedMessage
          id="review.intro"
          defaultMessage="The novel {title} explores themes of identity and belonging."
          values={{
            title: <ForeignText lang="de">Der Steppenwolf</ForeignText>,
          }}
        />
      </p>
    </article>
  );
}

Der Interface-Text passt sich durch react-intl an die Sprache des Benutzers an, während der Buchtitel sein ursprüngliches Deutsch mit korrekter Sprachkennzeichnung für Barrierefreiheit beibehält.