Comment marquer le contenu multilingue dans Next.js (Pages Router) v16

Problème

Lorsqu'une page contient du texte dans plusieurs langues, les navigateurs et les technologies d'assistance traitent tout le contenu comme s'il appartenait à la langue principale de la page. Un lecteur d'écran configuré pour l'anglais tentera de prononcer des phrases françaises, des titres de livres espagnols ou des noms d'entreprises allemands en utilisant la phonétique anglaise, produisant un résultat inintelligible pour les utilisateurs qui dépendent de l'audio. Les navigateurs appliquent la vérification orthographique et les règles typographiques basées sur la mauvaise langue, signalant les mots étrangers correctement orthographiés comme des erreurs et gérant mal la ponctuation et les conventions de formatage spécifiques à la langue.

Cela crée des barrières pour les utilisateurs malvoyants qui dépendent d'une prononciation précise, et dégrade l'expérience pour tous les utilisateurs en introduisant du bruit visuel provenant d'avertissements de vérification orthographique incorrects et d'un rendu de texte inapproprié.

Solution

Appliquez l'attribut HTML lang aux éléments contenant du texte en langue étrangère, en déclarant explicitement la langue de ce contenu. Cet attribut signale aux navigateurs et aux technologies d'assistance que le texte marqué doit être traité en utilisant les règles de sa langue déclarée plutôt que la langue principale de la page. Les lecteurs d'écran basculent vers le moteur de prononciation approprié, les navigateurs appliquent les dictionnaires de vérification orthographique corrects, et les moteurs typographiques utilisent les règles de formatage spécifiques à la langue.

En enveloppant le texte étranger dans des éléments avec l'attribut lang correct, vous créez des frontières linguistiques claires dans votre contenu qui préservent l'intégrité du texte multilingue.

Étapes

1. Créer un composant de texte marqué par langue

Construisez un composant React qui enveloppe le contenu en langue étrangère dans un élément span avec l'attribut lang approprié.

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

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

Ce composant accepte un code de langue et enveloppe ses enfants dans un span avec l'attribut lang défini, créant une frontière linguistique que les technologies d'assistance et les navigateurs peuvent reconnaître.

2. Utiliser le composant pour marquer les phrases étrangères

Enveloppez le texte en langue étrangère dans votre contenu en utilisant le composant, en spécifiant le code de langue ISO 639-1 approprié.

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>
  );
}

Chaque phrase étrangère est enveloppée dans le composant avec son code de langue, garantissant que les lecteurs d'écran la prononcent correctement et que les navigateurs appliquent les règles linguistiques appropriées.

3. Gérer les passages plus longs en langue étrangère

Pour du contenu étranger de plusieurs phrases, enveloppez l'ensemble du passage dans un seul élément marqué linguistiquement afin d'éviter de fragmenter le contexte linguistique.

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>
  );
}

Appliquer lang directement aux éléments de niveau bloc comme blockquote ou p marque l'ensemble du passage, permettant aux lecteurs d'écran de maintenir une prononciation cohérente tout au long et aux navigateurs d'appliquer les règles linguistiques au contexte complet.

4. Marquer le texte étranger dans les messages formatés

Lorsque du contenu en langue étrangère apparaît dans des messages traduits, utilisez le composant à l'intérieur du formatage de texte enrichi du message.

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>
  );
}

Le composant s'intègre avec le formatage de texte enrichi de react-intl, vous permettant de marquer les termes étrangers dans le contenu traduit tout en préservant la frontière linguistique pour les technologies d'assistance.

5. Créer des variantes pour l'emphase sémantique

Étendez le modèle pour utiliser des éléments HTML sémantiques lorsque le texte étranger nécessite également une emphase ou un style idiomatique.

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

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

L'élément i représente sémantiquement du texte dans une voix ou une humeur alternative, le rendant approprié pour les termes étrangers qui sont également distingués du texte environnant. L'attribut lang garantit une prononciation correcte tandis que l'élément fournit une signification sémantique.

6. Documenter les codes de langue pris en charge

Créez un type ou une constante définissant les codes de langue pris en charge par votre application pour garantir la cohérence et détecter les erreurs lors du développement.

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>;
}

Définir les langues prises en charge sous forme de constantes fournit l'autocomplétion dans votre éditeur et documente les codes de langue utilisés dans votre application, tout en permettant des codes de langue arbitraires si nécessaire.