Wie man gemischtsprachige Inhalte in TanStack Start v1 kennzeichnet

Problem

Wenn eine Seite Text in mehreren Sprachen enthält, gehen Browser und Hilfstechnologien 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 Firmennamen mit englischer Phonetik auszusprechen, was für Nutzer, die auf Audio angewiesen sind, unverständliche Ausgaben erzeugt. Browser wenden falsche Rechtschreibprüfungsregeln an und markieren korrekt geschriebene fremdsprachige Wörter als Fehler. Typografie-Engines behandeln Interpunktion und Abstandskonventionen, die zwischen Sprachen unterschiedlich sind, fehlerhaft.

Diese Probleme schaffen Barrieren für Nutzer mit Sehbehinderungen und erschweren das Verständnis der Inhalte für jeden, der Hilfstechnologien verwendet. Das Problem verschärft sich, wenn fremdsprachige Begriffe häufig vorkommen oder wenn der Inhalt längere Passagen in einer anderen Sprache enthält.

Lösung

Markieren Sie jeden fremdsprachigen Text mit einem HTML lang-Attribut, das die korrekte Sprache identifiziert und Hilfstechnologien anweist, die Aussprache-Engines vorübergehend zu wechseln. Fügen Sie einem Element, das den fremdsprachigen Inhalt umgibt, ein Sprachattribut hinzu, um ihn anders zu gestalten oder zu verarbeiten. Diese Trennung ermöglicht es Screenreadern, jede Sprache korrekt auszusprechen, und ermöglicht Browsern, für jedes Segment angemessene Typografie- und Rechtschreibprüfungsregeln anzuwenden.

Schritte

1. Erstellen einer Komponente zur Markierung fremdsprachiger Texte

Umschließen Sie fremdsprachigen Text mit einem Element mit dem lang-Attribut und verwenden Sie ein idiomatisches Textelement anstelle eines Spans, da einige Screenreader das lang-Attribut bei Spans ignorieren.

interface ForeignTextProps {
  lang: string;
  children: React.ReactNode;
}

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

Das i-Element repräsentiert Text in einer alternativen Stimme oder Stimmung, einschließlich Begriffen aus anderen Sprachen, und stellt sicher, dass Screenreader das Sprachattribut respektieren.

2. Verwenden Sie die Komponente, um fremdsprachige Ausdrücke im Text zu kennzeichnen

Wenden Sie die Komponente auf fremdsprachige Wörter oder Ausdrücke in Ihrem Inhalt an und geben Sie den entsprechenden Sprachcode an.

import { ForeignText } from "~/components/ForeignText";

export default function ArticlePage() {
  return (
    <article>
      <p>
        Das Buch <ForeignText lang="es">Cien años de soledad</ForeignText> gilt
        als Meisterwerk des magischen Realismus.
      </p>
      <p>
        Sie sagte <ForeignText lang="fr">c'est la vie</ForeignText> und ging
        weg.
      </p>
    </article>
  );
}

Das lang-Attribut im entsprechenden Element weist assistive Technologien an, vorübergehend die Sprache zu wechseln, um eine korrekte Aussprache zu gewährleisten.

3. Kennzeichnen Sie längere fremdsprachige Passagen

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

export default function QuotePage() {
  return (
    <article>
      <p>Der ursprüngliche deutsche Text lautet:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        Dies übersetzt sich zu: The limits of my language mean the limits of my
        world.
      </p>
    </article>
  );
}

Das lang-Attribut kann mit fast jedem HTML-Element verwendet werden, was es einfach macht, innerhalb einer Seite die Sprache zu wechseln, indem das Attribut zu Elementen wie blockquote hinzugefügt wird.

4. Suchen Sie Sprachcodes für Ihre Inhalte

Verwenden Sie Sprach-Tags aus dem IANA Language Subtag Registry, die Sie mit dem inoffiziellen Language Subtag Lookup-Tool finden können.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Häufige Beispiele: <ForeignText lang="fr">bonjour</ForeignText> (Französisch),
        <ForeignText lang="de">Gesundheit</ForeignText> (Deutsch),
        <ForeignText lang="ja">ありがとう</ForeignText> (Japanisch),
        <ForeignText lang="ar">شكرا</ForeignText> (Arabisch)
      </p>
    </div>
  );
}

Verwenden Sie für jede Sprache den zweistelligen Code, wenn dieser existiert, und nutzen Sie einen dreistelligen Code nur, wenn kein anderer Code verfügbar ist.