Comment marquer le contenu multilingue dans React Router v7

Problème

Lorsqu'une page contient du texte dans 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 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 incorrectement les mots étrangers comme des erreurs et gérant mal la ponctuation spécifique à la langue. Les moteurs de recherche et les outils de traduction ne peuvent pas traiter avec précision le contenu multilingue sans marqueurs de langue explicites.

Cela affecte non seulement les utilisateurs de lecteurs d'écran, mais toute personne utilisant des fonctionnalités de navigateur qui dépendent de la détection de langue, notamment 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 sur le code de langue correct. L'attribut lang indique aux navigateurs et aux technologies d'assistance de changer les règles de langue pour ce contenu spécifique, garantissant une prononciation correcte par les lecteurs d'écran et une vérification orthographique et une typographie appropriées 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 (tels que fr pour le français ou es pour l'espagnol) et des codes de région optionnels pour une gestion spécifique au dialecte.

Étapes

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

Créez 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 du texte étranger en ligne

Enveloppez les mots ou expressions étrangers dans votre contenu en utilisant le composant ForeignText.

export default function ArticlePage() {
  return (
    <article>
      <h1>International Cuisine</h1>
      <p>
        The restaurant's signature dish is{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, a classic French
        preparation that pairs perfectly with their house wine.
      </p>
      <p>
        Their dessert menu features{" "}
        <ForeignText lang="es">tres leches</ForeignText> and{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

Les lecteurs d'écran prononceront désormais "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>Universal Declaration of Human Rights</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 l'intégralité de la citation comme française, garantissant 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 aux côtés 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 via react-intl, tandis que le titre du livre conserve son allemand d'origine avec un marquage de langue approprié pour l'accessibilité.