Comment marquer le contenu multilingue dans TanStack Start v1

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

Ces problèmes créent des barrières pour les utilisateurs ayant une déficience visuelle et rendent le contenu plus difficile à comprendre pour toute personne utilisant une technologie 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. Utiliser 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>
        The book <ForeignText lang="es">Cien años de soledad</ForeignText> is
        considered a masterpiece of magical realism.
      </p>
      <p>
        She said <ForeignText lang="fr">c'est la vie</ForeignText> and walked
        away.
      </p>
    </article>
  );
}

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

3. Marquer les 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>
      <p>The original German text reads:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        This translates to: The limits of my language mean the limits of my
        world.
      </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. Rechercher les codes de langue pour votre contenu

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

export default function MultilingualPage() {
  return (
    <div>
      <p>
        Common examples: <ForeignText lang="fr">bonjour</ForeignText> (French),
        <ForeignText lang="de">Gesundheit</ForeignText> (German),
        <ForeignText lang="ja">ありがとう</ForeignText> (Japanese),
        <ForeignText lang="ar">شكرا</ForeignText> (Arabic)
      </p>
    </div>
  );
}

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