Marquer le contenu multilingue

Problème

Une page est correctement identifiée comme étant en anglais, mais elle contient une citation, un nom ou un terme en langue étrangère (par exemple, un titre de livre français). Les lecteurs d'écran prononcent mal ce texte, et les navigateurs peuvent appliquer une typographie ou une vérification orthographique incorrecte, car ils supposent toujours que tout le contenu est en anglais.

Solution

Enveloppez le texte en langue étrangère dans un élément HTML en ligne, tel qu'un <span>, et ajoutez l'attribut lang avec le code de langue approprié. Cela indique aux navigateurs et aux technologies d'assistance quelle langue utiliser précisément pour ce fragment spécifique, sans affecter la langue principale de la page.

Étapes

1. Identifier le contenu multilingue

Tout d'abord, créez ou identifiez un composant qui affiche du texte contenant une phrase en langue étrangère. Dans cet exemple, une page en anglais inclut une phrase en français.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

Sans aucune modification, un lecteur d'écran tentera de prononcer "C'est la vie" en utilisant la phonétique anglaise, ce qui sonne incorrectement.

2. Envelopper le texte étranger dans un élément

Modifiez le composant pour envelopper la phrase spécifique dans un élément <span>. Cela isole le texte afin que vous puissiez lui appliquer un attribut.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. Ajouter l'attribut lang

Ajoutez l'attribut lang au <span> avec le code de langue correct pour cette phrase. Dans ce cas, le code pour le français est fr.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. Utiliser le composant sur votre page

Vous pouvez maintenant utiliser ce composant sur votre page.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

Lorsqu'un lecteur d'écran rencontre l'attribut lang="fr", il bascule vers sa voix en langue française pour prononcer correctement la phrase. Les navigateurs peuvent également utiliser cet indice pour appliquer une typographie spécifique au français (comme les guillemets corrects) ou exclure la phrase de la vérification orthographique anglaise.