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

Problème

Lorsqu'une page contient du texte en 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 ainsi un résultat inintelligible pour les utilisateurs qui dépendent de l'audio. Les navigateurs appliquent des règles de vérification orthographique et de typographie basées sur la mauvaise langue, signalant comme erreurs des mots étrangers correctement orthographiés et traitant incorrectement la ponctuation et les conventions de formatage spécifiques à chaque langue.

Cela crée des obstacles pour les utilisateurs ayant des déficiences visuelles 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 incorrects de vérification orthographique et d'un rendu de texte inapproprié.

Solution

Appliquez l'attribut HTML lang aux éléments contenant du texte en langue étrangère, 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é selon les règles de la langue déclarée plutôt que selon la langue principale de la page. Les lecteurs d'écran passent au 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 la 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 ainsi une frontière linguistique que les technologies d'assistance et les navigateurs peuvent reconnaître.

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

Encadrez 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 expression étrangère est encadré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 comportant plusieurs phrases, encadrez l'ensemble du passage dans un seul élément marqué par la langue pour é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 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 au 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 en langue étrangère 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, ce qui le rend approprié pour les termes étrangers qui se distinguent également du texte environnant. L'attribut lang assure 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 que votre application prend en charge pour assurer la cohérence et détecter les erreurs pendant le 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 comme constantes fournit l'autocomplétion dans votre éditeur et documente quels codes de langue sont utilisés dans toute votre application, tout en permettant des codes de langue arbitraires si nécessaire.