Как пометить многоязычный контент в TanStack Start v1

Проблема

Когда на странице есть текст на нескольких языках, браузеры и вспомогательные технологии предполагают, что весь контент написан на языке, объявленном для страницы. Например, скринридер, настроенный на английский, будет пытаться произносить французские фразы, испанские названия книг или немецкие названия компаний с английским произношением, что делает речь неразборчивой для пользователей, полагающихся на аудиовывод. Браузеры применяют неправильные правила проверки орфографии, отмечая правильно написанные иностранные слова как ошибки. Типографские движки неправильно обрабатывают знаки препинания и пробелы, если они отличаются в других языках.

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

Решение

Помечайте каждый фрагмент текста на иностранном языке HTML-атрибутом lang, указывающим правильный язык. Это даст вспомогательным технологиям команду временно переключить движок произношения. Добавьте языковой атрибут к элементу, оборачивающему иностранный контент, чтобы стилизовать или обрабатывать его отдельно. Такой подход позволяет скринридерам правильно произносить каждый язык, а браузерам — применять подходящие правила типографики и проверки орфографии к каждому сегменту.

Шаги

1. Создайте компонент для пометки иностранного текста

Оборачивайте текст на иностранном языке в элемент с атрибутом lang, используя подходящий текстовый элемент вместо span, потому что некоторые скринридеры игнорируют атрибут lang на span.

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

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

Элемент i используется для текста с другим тоном или настроением, включая термины на других языках, и гарантирует, что скринридеры учитывают языковой атрибут.

2. Используйте компонент для выделения встроенных иностранных фраз

Применяйте компонент к иностранным словам или фразам в вашем контенте, указывая соответствующий языковой код.

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

Атрибут lang на нужном элементе подсказывает вспомогательным технологиям временно переключить язык, чтобы обеспечить правильное произношение.

3. Отмечайте более длинные фрагменты на иностранном языке

Для многофразного иностранного контента применяйте атрибут lang напрямую к блочным элементам.

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

Атрибут lang можно использовать почти с любым HTML-элементом, поэтому легко менять язык на странице, добавляя этот атрибут, например, к blockquote.

4. Найдите языковые коды для вашего контента

Используйте языковые теги из реестра IANA Language Subtag Registry — их можно найти с помощью неофициального инструмента 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>
  );
}

Для любого языка используйте двухбуквенный код, если он есть, а трёхбуквенный — только если другого варианта нет.