Marquage du 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 fonctionnent toujours selon l'hypothèse que tout le contenu est en anglais.

Solution

Enveloppez le texte en langue étrangère dans un élément HTML inline, comme un <span>, et ajoutez l'attribut lang avec le code de langue approprié. Cela indique aux navigateurs et aux technologies d'assistance exactement quelle langue utiliser 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 essaiera de prononcer "C'est la vie" en utilisant la phonétique anglaise, ce qui sonne incorrect.

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. Utilisez 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 basculera vers sa voix en langue française pour prononcer correctement la phrase. Les navigateurs peuvent également utiliser cette indication pour appliquer la typographie spécifique au français (comme les guillemets corrects) ou exclure la phrase de la vérification orthographique en anglais.