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

Problem

Wenn eine Seite Text in mehreren Sprachen enthält, behandeln Browser und Hilfstechnologien den gesamten Inhalt so, als gehöre er zur Hauptsprache der Seite. 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 Rechtschreibprüfungs- und Typografieregeln basierend auf der falschen Sprache an, markieren korrekt geschriebene fremdsprachige Wörter als Fehler und behandeln 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 visuelle Störungen aufgrund falscher Rechtschreibwarnungen und unsachgemäßer Textdarstellung.

Lösung

Wenden Sie das HTML-Attribut lang auf Elemente an, die fremdsprachigen Text enthalten, und deklarieren Sie damit explizit die Sprache dieses Inhalts. Dieses Attribut signalisiert Browsern und Hilfstechnologien, dass der markierte Text mit den Regeln seiner deklarierten Sprache und nicht mit der Hauptsprache der Seite verarbeitet werden sollte. 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 lang-Attribut einschließen, schaffen Sie klare Sprachgrenzen innerhalb Ihres Inhalts, die die Integrität mehrsprachiger Texte bewahren.

Schritte

1. Erstellen einer sprachmarkierten Textkomponente

Bauen Sie eine React-Komponente, die fremdsprachige Inhalte in ein span-Element mit dem entsprechenden lang-Attribut einschließt.

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 Children in einem span mit dem gesetzten lang-Attribut, wodurch eine Sprachgrenze geschaffen wird, die Hilfstechnologien und Browser erkennen können.

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

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>Die französische Küche verstehen</h1>
      <p>
        Das Konzept von <ForeignText lang="fr">mise en place</ForeignText> ist
        grundlegend für professionelles Kochen. Es bedeutet, dass alle Zutaten
        vorbereitet und organisiert sind, bevor man beginnt.
      </p>
      <p>
        Das Restaurant <ForeignText lang="fr">Le Bernardin</ForeignText> in New
        York hat seit Jahrzehnten drei Michelin-Sterne.
      </p>
    </article>
  );
}

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

3. Umgang mit längeren fremdsprachigen Passagen

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

export default function QuotePage() {
  return (
    <article>
      <h1>Allgemeine Erklärung der Menschenrechte</h1>
      <h2>Artikel 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 die direkte Anwendung von lang auf Blockelemente wie blockquote oder p wird die gesamte Passage markiert, sodass Screenreader eine konsistente Aussprache beibehalten und Browser Sprachregeln auf den gesamten Kontext anwenden können.

4. Fremdsprachigen Text in formatierten Nachrichten kennzeichnen

Wenn fremdsprachige Inhalte innerhalb übersetzter Nachrichten erscheinen, 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="Dieses Gericht heißt in der französischen Küche {dishName}."
        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 markieren und gleichzeitig die Sprachgrenze für assistive Technologien zu erhalten.

5. Varianten für semantische Hervorhebung erstellen

Erweitere das Muster, um semantische HTML-Elemente zu verwenden, wenn fremdsprachlicher Text auch Betonung oder idiomatische Formatierung 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, was es für fremdsprachliche Begriffe geeignet macht, die sich vom umgebenden Text abheben sollen. Das lang-Attribut stellt die korrekte Aussprache sicher, während das Element semantische Bedeutung vermittelt.

6. Unterstützte Sprachcodes dokumentieren

Erstelle einen Typ oder eine Konstante, die die von deiner Anwendung unterstützten Sprachcodes definiert, um Konsistenz zu gewährleisten und Fehler 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 deinem Editor und dokumentiert, welche Sprachcodes in deiner Anwendung verwendet werden, während gleichzeitig beliebige Sprachcodes bei Bedarf zugelassen werden.