Разметка многоязычного контента

Проблема

Страница определена как английская, но на ней есть цитата, имя или термин на другом языке (например, название французской книги). Экранные дикторы неправильно произносят этот текст, а браузеры могут применять некорректную типографику или проверку орфографии, так как считают, что весь контент на английском.

Решение

Обёрните фрагмент на другом языке в строчный HTML-элемент, например <span>, и добавьте атрибут lang с нужным языковым кодом. Это даст браузерам и вспомогательным технологиям понять, какой язык использовать для этого фрагмента, не меняя основной язык страницы.

Шаги

1. Найдите многоязычный контент

Сначала создайте или найдите компонент, который отображает текст с фразой на другом языке. В этом примере на английской странице есть фраза на французском.

// 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>
  );
}

Без изменений экранный диктор попытается произнести «C'est la vie» по-английски, что звучит неправильно.

2. Оберните иностранный текст в элемент

Измените компонент так, чтобы нужная фраза была обёрнута в элемент <span>. Это позволит добавить к ней нужный атрибут.

// 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. Добавьте атрибут lang

Добавьте атрибут lang к <span> с правильным языковым кодом для этой фразы. В нашем случае код для французского — 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. Используйте компонент на странице

Теперь вы можете использовать этот компонент на своей странице.

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

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

Когда скринридер встречает атрибут lang="fr", он переключается на французский голос, чтобы правильно произнести фразу. Браузеры также могут использовать эту подсказку для применения французской типографики (например, правильных кавычек) или исключения фразы из проверки орфографии на английском.