Comment marquer le contenu multilingue dans TanStack Start v1

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 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 incorrectes, signalant comme erreurs des mots étrangers correctement orthographiés. Les moteurs typographiques gèrent mal les conventions de ponctuation et d'espacement qui diffèrent selon les langues.

Ces problèmes créent des obstacles pour les utilisateurs ayant des déficiences visuelles et rendent le contenu plus difficile à comprendre pour toute personne utilisant des technologies d'assistance. Le problème s'aggrave lorsque des termes étrangers apparaissent fréquemment ou lorsque le contenu inclut des passages plus longs dans une autre langue.

Solution

Marquez chaque élément de texte en langue étrangère avec un attribut HTML lang qui identifie sa langue correcte, indiquant aux technologies d'assistance de changer temporairement de moteur de prononciation. Ajoutez un attribut de langue à un élément entourant le contenu étranger pour le styliser ou le traiter différemment. Cette séparation permet aux lecteurs d'écran de prononcer correctement chaque langue et permet aux navigateurs d'appliquer les règles typographiques et de vérification orthographique appropriées à chaque segment.

Étapes

1. Créer un composant pour marquer le texte étranger

Enveloppez le texte en langue étrangère dans un élément avec l'attribut lang, en utilisant un élément de texte idiomatique plutôt qu'un span car certains lecteurs d'écran ignorent l'attribut lang sur les spans.

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

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

L'élément i représente du texte dans une voix ou une humeur alternative, y compris des termes d'autres langues, et garantit que les lecteurs d'écran respectent l'attribut de langue.

2. Utilisez le composant pour marquer les expressions étrangères en ligne

Appliquez le composant aux mots ou expressions étrangères dans votre contenu, en spécifiant le code de langue approprié.

import { ForeignText } from "~/components/ForeignText";

export default function ArticlePage() {
  return (
    <article>
      <p>
        Le livre <ForeignText lang="es">Cien años de soledad</ForeignText> est
        considéré comme un chef-d'œuvre du réalisme magique.
      </p>
      <p>
        Elle a dit <ForeignText lang="fr">c'est la vie</ForeignText> et s'en est
        allée.
      </p>
    </article>
  );
}

L'attribut lang sur l'élément approprié indique aux technologies d'assistance de changer temporairement de langue, assurant ainsi une prononciation précise.

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

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

export default function QuotePage() {
  return (
    <article>
      <p>Le texte allemand original se lit comme suit :</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        Cela se traduit par : Les limites de ma langue signifient les limites de mon
        monde.
      </p>
    </article>
  );
}

L'attribut lang peut être utilisé avec presque tous les éléments HTML, ce qui facilite le changement de langue au sein d'une page en ajoutant l'attribut à des éléments comme blockquote.

4. Recherchez les codes de langue pour votre contenu

Utilisez les balises de langue du registre des sous-balises de langue IANA, que vous pouvez trouver à l'aide de l'outil non officiel Language Subtag Lookup.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Exemples courants : <ForeignText lang="fr">bonjour</ForeignText> (français),
        <ForeignText lang="de">Gesundheit</ForeignText> (allemand),
        <ForeignText lang="ja">ありがとう</ForeignText> (japonais),
        <ForeignText lang="ar">شكرا</ForeignText> (arabe)
      </p>
    </div>
  );
}

Pour n'importe quelle langue, utilisez le code à deux lettres s'il existe, et n'utilisez un code à trois lettres que si aucun autre code n'est disponible.