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言語サブタグレジストリの言語タグを使用します。非公式の言語サブタグ検索ツールを使って検索できます。

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

どの言語でも、2文字のコードが存在する場合はそれを使用し、他のコードが利用できない場合のみ3文字のコードを使用します。