Wie man mehrsprachige Inhalte in Next.js (Pages Router) v16 kennzeichnet

Problem

Wenn eine Seite Text in mehreren Sprachen enthält, behandeln Browser und assistive Technologien alle Inhalte so, als gehörten sie zur Hauptsprache der Seite. 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 Rechtschreibprüfung und typografische Regeln basierend auf der falschen Sprache an, markieren korrekt geschriebene fremdsprachige Wörter als Fehler und handhaben sprachspezifische Interpunktion und Formatierungskonventionen falsch.

Dies schafft Barrieren für Nutzer mit Sehbehinderungen, die auf korrekte Aussprache angewiesen sind, und verschlechtert die Erfahrung für alle Nutzer durch visuelles Rauschen von falschen Rechtschreibprüfungswarnungen und unsachgemäßer Textdarstellung.

Lösung

Wenden Sie das HTML-Attribut lang auf Elemente an, die fremdsprachigen Text enthalten, und deklarieren Sie explizit die Sprache dieses Inhalts. Dieses Attribut signalisiert Browsern und assistiven Technologien, dass der markierte Text mit den Regeln seiner deklarierten Sprache und nicht mit der Hauptsprache der Seite verarbeitet werden soll. Screenreader wechseln zur entsprechenden Aussprache-Engine, Browser wenden korrekte Rechtschreibprüfungswörterbücher an und Typografie-Engines verwenden sprachspezifische Formatierungsregeln.

Indem Sie fremdsprachigen Text in Elemente mit dem korrekten Attribut lang einbetten, schaffen Sie klare Sprachgrenzen innerhalb Ihres Inhalts, die die Integrität mehrsprachiger Texte bewahren.

Schritte

1. Erstellen Sie eine sprachmarkierte Textkomponente

Erstellen Sie eine React-Komponente, die fremdsprachige Inhalte in ein Element span mit dem entsprechenden Attribut lang einbettet.

interface 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 gesetztem lang-Attribut, wodurch eine Sprachgrenze entsteht, die von assistiven Technologien und Browsern erkannt werden kann.

2. Verwenden Sie die Komponente zur Kennzeichnung fremdsprachiger Ausdrücke

Umschließen Sie fremdsprachigen Text innerhalb Ihres Inhalts mit der Komponente und geben Sie den entsprechenden ISO 639-1-Sprachcode an.

export default function ArticlePage() {
  return (
    <article>
      <h1>Understanding French Cuisine</h1>
      <p>
        The concept of <ForeignText lang="fr">mise en place</ForeignText> is
        fundamental to professional cooking. It means having all ingredients
        prepared and organized before you begin.
      </p>
      <p>
        The restaurant <ForeignText lang="fr">Le Bernardin</ForeignText> in New
        York has maintained three Michelin stars for decades.
      </p>
    </article>
  );
}

Jeder fremdsprachige Ausdruck wird in der Komponente mit seinem Sprachcode umschlossen, wodurch sichergestellt wird, dass Screenreader ihn korrekt aussprechen und Browser entsprechende Sprachregeln anwenden.

3. Behandeln Sie längere fremdsprachige Passagen

Bei fremdsprachigem Inhalt mit mehreren Sätzen umschließen Sie die gesamte Passage in einem einzigen sprachmarkierten Element, um eine Fragmentierung des Sprachkontexts zu vermeiden.

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 1</h2>
      <blockquote lang="es">
        <p>
          Todos los seres humanos nacen libres e iguales en dignidad y derechos
          y, dotados como están de razón y conciencia, deben comportarse
          fraternalmente los unos con los otros.
        </p>
      </blockquote>
    </article>
  );
}

Durch direktes Anwenden von lang auf Block-Level-Elemente wie blockquote oder p wird die gesamte Passage markiert, wodurch Screenreader eine konsistente Aussprache durchgehend beibehalten können und Browser Sprachregeln auf den vollständigen Kontext anwenden können.

4. Kennzeichnen Sie fremdsprachigen Text in formatierten Nachrichten

Wenn fremdsprachiger Inhalt innerhalb übersetzter Nachrichten erscheint, verwenden Sie die Komponente innerhalb der Rich-Text-Formatierung der Nachricht.

import { FormattedMessage } from "react-intl";

export default function RecipePage() {
  return (
    <div>
      <FormattedMessage
        id="recipe.description"
        defaultMessage="This dish is called {dishName} in French cuisine."
        values={{
          dishName: <ForeignText lang="fr">coq au vin</ForeignText>,
        }}
      />
    </div>
  );
}

Die Komponente integriert sich in die Rich-Text-Formatierung von react-intl und ermöglicht es Ihnen, fremdsprachige Begriffe innerhalb übersetzter Inhalte zu kennzeichnen, während die Sprachgrenze für assistive Technologien erhalten bleibt.

5. Erstellen Sie Varianten für semantische Hervorhebung

Erweitern Sie das Muster, um semantische HTML-Elemente zu verwenden, wenn fremdsprachiger Text auch Hervorhebung oder idiomatische Gestaltung erfordert.

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

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

Das i-Element repräsentiert semantisch Text in einer alternativen Stimme oder Stimmung und eignet sich daher für fremdsprachige Begriffe, die auch vom umgebenden Text abgesetzt sind. Das lang-Attribut gewährleistet korrekte Aussprache, während das Element semantische Bedeutung liefert.

6. Unterstützte Sprachcodes dokumentieren

Erstellen Sie einen Typ oder eine Konstante, die die von Ihrer Anwendung unterstützten Sprachcodes definiert, um Konsistenz sicherzustellen und Fehler bereits während der Entwicklung zu erkennen.

export const SUPPORTED_LANGUAGES = {
  FRENCH: "fr",
  SPANISH: "es",
  GERMAN: "de",
  ITALIAN: "it",
  JAPANESE: "ja",
  CHINESE: "zh",
} as const;

type LanguageCode =
  (typeof SUPPORTED_LANGUAGES)[keyof typeof SUPPORTED_LANGUAGES];

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

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

Die Definition unterstützter Sprachen als Konstanten bietet Autovervollständigung in Ihrem Editor und dokumentiert, welche Sprachcodes in Ihrer Anwendung verwendet werden, während bei Bedarf weiterhin beliebige Sprachcodes möglich sind.