Comment marquer le contenu multilingue dans React Router v7

Problème

Lorsqu'une page contient du texte en plusieurs langues, les navigateurs et les technologies d'assistance supposent que tout le contenu utilise la langue déclarée 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 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 langue de la page, signalant à tort les mots étrangers comme des erreurs et traitant incorrectement la ponctuation spécifique à chaque langue. Les moteurs de recherche et les outils de traduction ne peuvent pas traiter avec précision un contenu multilingue sans marqueurs de langue explicites.

Cela affecte non seulement les utilisateurs de lecteurs d'écran, mais aussi toute personne utilisant des fonctionnalités de navigateur qui dépendent de la détection de langue, y compris la traduction automatique, la synthèse vocale et le mode lecture.

Solution

Enveloppez le texte en langue étrangère dans des éléments HTML avec un attribut lang défini avec le code de langue correct. L'attribut lang indique aux navigateurs et aux technologies d'assistance de changer les règles linguistiques pour ce contenu spécifique, assurant une prononciation correcte par les lecteurs d'écran et une vérification orthographique et typographique appropriée par les navigateurs.

Utilisez des éléments HTML sémantiques comme <span> ou <i> pour envelopper le texte étranger en ligne sans perturber la mise en page. L'attribut lang accepte les codes de langue ISO 639-1 (comme fr pour le français ou es pour l'espagnol) et des codes régionaux optionnels pour la gestion spécifique des dialectes.

Étapes

1. Créer un composant pour marquer le texte en langue étrangère

Construisez un composant réutilisable qui enveloppe le texte dans un élément span avec l'attribut lang approprié.

type 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, permettant aux lecteurs d'écran de changer les règles de prononciation pour le texte inclus.

2. Utiliser le composant pour marquer le texte étranger en ligne

Encadrez les mots ou phrases étrangers dans votre contenu en utilisant le composant ForeignText.

export default function ArticlePage() {
  return (
    <article>
      <h1>Cuisine internationale</h1>
      <p>
        Le plat signature du restaurant est le{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, une préparation française
        classique qui s'accorde parfaitement avec leur vin maison.
      </p>
      <p>
        Leur menu de desserts propose{" "}
        <ForeignText lang="es">tres leches</ForeignText> et{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

Les lecteurs d'écran prononceront maintenant "coq au vin" en utilisant la phonétique française, "tres leches" en utilisant la phonétique espagnole, et "tiramisu" en utilisant la phonétique italienne, tandis que le texte anglais environnant utilise la prononciation anglaise.

3. Marquer des passages plus longs en langue étrangère

Pour du contenu étranger de plusieurs phrases, appliquez l'attribut lang directement aux éléments de niveau bloc.

export default function QuotePage() {
  return (
    <article>
      <h1>Déclaration universelle des droits de l'homme</h1>
      <h2>Article 1</h2>
      <blockquote lang="fr">
        <p>
          Tous les êtres humains naissent libres et égaux en dignité et en
          droits. Ils sont doués de raison et de conscience et doivent agir les
          uns envers les autres dans un esprit de fraternité.
        </p>
      </blockquote>
    </article>
  );
}

L'application de lang à l'élément blockquote marque toute la citation comme étant en français, assurant une prononciation et une typographie correctes pour l'ensemble du passage.

4. Combiner avec du texte d'interface traduit

Lors de l'affichage de contenu étranger à côté de texte d'interface traduit, utilisez react-intl pour les éléments d'interface et les attributs lang pour le contenu généré par l'utilisateur ou cité.

import { FormattedMessage } from "react-intl";
import { ForeignText } from "~/components/ForeignText";

export default function BookReview() {
  return (
    <article>
      <h1>
        <FormattedMessage id="review.title" defaultMessage="Book Review" />
      </h1>
      <p>
        <FormattedMessage
          id="review.intro"
          defaultMessage="The novel {title} explores themes of identity and belonging."
          values={{
            title: <ForeignText lang="de">Der Steppenwolf</ForeignText>,
          }}
        />
      </p>
    </article>
  );
}

Le texte de l'interface s'adapte à la locale de l'utilisateur grâce à react-intl, tandis que le titre du livre conserve son allemand original avec un marquage linguistique approprié pour l'accessibilité.