Wie man gemischtsprachige Inhalte in TanStack Start v1 kennzeichnet

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 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 handhaben Interpunktions- und Abstandskonventionen, die sich zwischen Sprachen unterscheiden, falsch.

Diese Probleme schaffen Barrieren für Nutzer mit Sehbehinderungen und erschweren das Verständnis von Inhalten für alle, die assistive Technologien verwenden. Das Problem verstärkt sich, wenn fremdsprachige Begriffe häufig auftreten oder wenn der Inhalt längere Passagen in einer anderen Sprache enthält.

Lösung

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

Schritte

1. Erstellen Sie eine Komponente zur Kennzeichnung fremdsprachiger Texte

Umschließen Sie fremdsprachigen Text in einem Element mit dem lang-Attribut und verwenden Sie ein idiomatisches Textelement anstelle eines Span-Elements, 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 inline fremdsprachige Ausdrücke 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>
        The book <ForeignText lang="es">Cien años de soledad</ForeignText> is
        considered a masterpiece of magical realism.
      </p>
      <p>
        She said <ForeignText lang="fr">c'est la vie</ForeignText> and walked
        away.
      </p>
    </article>
  );
}

Das lang-Attribut am entsprechenden Element weist assistive Technologien an, vorübergehend die Sprache zu wechseln und so eine korrekte Aussprache sicherzustellen.

3. Kennzeichnen 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>
      <p>The original German text reads:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        This translates to: The limits of my language mean the limits of my
        world.
      </p>
    </article>
  );
}

Das lang-Attribut kann mit nahezu jedem HTML-Element verwendet werden, wodurch es einfach ist, die Sprache innerhalb einer Seite zu ändern, indem das Attribut zu Elementen wie blockquote hinzugefügt wird.

4. Suchen Sie Sprachcodes für Ihren Inhalt nach

Verwenden Sie Sprach-Tags aus der IANA Language Subtag Registry, die Sie mithilfe des inoffiziellen Language Subtag Lookup-Tools finden können.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Common examples: <ForeignText lang="fr">bonjour</ForeignText> (French),
        <ForeignText lang="de">Gesundheit</ForeignText> (German),
        <ForeignText lang="ja">ありがとう</ForeignText> (Japanese),
        <ForeignText lang="ar">شكرا</ForeignText> (Arabic)
      </p>
    </div>
  );
}

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