So markieren Sie mehrsprachige Inhalte in React Router v7

Problem

Wenn eine Seite Text in mehreren Sprachen enthält, gehen Browser und assistive Technologien davon aus, dass alle Inhalte die deklarierte Sprache der Seite verwenden. Ein für Englisch konfigurierter Screenreader versucht, 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üfung und typografische Regeln basierend auf der Seitensprache an, markieren fremdsprachige Wörter fälschlicherweise als Fehler und handhaben sprachspezifische Interpunktion falsch. Suchmaschinen und Übersetzungstools können mehrsprachige Inhalte ohne explizite Sprachmarkierungen nicht korrekt verarbeiten.

Dies betrifft nicht nur Screenreader-Nutzer, sondern alle, die Browserfunktionen verwenden, die auf Spracherkennung angewiesen sind, einschließlich automatischer Übersetzung, Text-to-Speech und Lesemodus.

Lösung

Umschließen Sie fremdsprachigen Text in HTML-Elementen mit einem lang-Attribut, das auf den korrekten Sprachcode gesetzt ist. Das lang-Attribut weist Browser und assistive Technologien an, die Sprachregeln für diesen spezifischen Inhalt zu wechseln, wodurch eine korrekte Aussprache durch Screenreader sowie angemessene Rechtschreibprüfung und Typografie durch Browser sichergestellt werden.

Verwenden Sie semantische HTML-Elemente wie <span> oder <i>, um inline fremdsprachigen 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 optional Regionscodes für dialektspezifische Behandlung.

Schritte

1. Erstellen Sie eine Komponente zum Markieren fremdsprachigen Texts

Erstellen 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 Kindelemente in einem span mit dem lang-Attribut, sodass Screenreader die Ausspracheregeln für den eingeschlossenen Text wechseln können.

2. Verwenden Sie die Komponente, um inline fremdsprachigen Text zu markieren

Umschließen Sie fremdsprachige Wörter oder Phrasen innerhalb Ihres Inhalts mit der ForeignText-Komponente.

export default function ArticlePage() {
  return (
    <article>
      <h1>International Cuisine</h1>
      <p>
        The restaurant's signature dish is{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, a classic French
        preparation that pairs perfectly with their house wine.
      </p>
      <p>
        Their dessert menu features{" "}
        <ForeignText lang="es">tres leches</ForeignText> and{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

Screenreader sprechen nun „coq au vin" mit französischer Phonetik aus, „tres leches" mit spanischer Phonetik und „tiramisu" mit italienischer Phonetik, während der umgebende englische Text mit englischer Aussprache wiedergegeben wird.

3. Markieren Sie längere fremdsprachige Passagen

Für fremdsprachige Inhalte mit mehreren Sätzen wenden Sie das lang-Attribut direkt auf Block-Level-Elemente an.

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 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 Anwendung von lang auf das blockquote-Element wird das gesamte Zitat als Französisch markiert, wodurch korrekte Aussprache und Typografie für die gesamte Passage sichergestellt werden.

4. Kombinieren Sie mit übersetztem UI-Text

Wenn Sie fremdsprachige Inhalte zusammen mit übersetztem Schnittstellentext 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 Schnittstellentext passt sich über react-intl an das Gebietsschema des Benutzers an, während der Buchtitel sein ursprüngliches Deutsch mit korrekter Sprachmarkierung für Barrierefreiheit beibehält.