TanStack Start v1で多言語コンテンツをマークする方法

問題

ページに複数の言語でテキストが含まれている場合、ブラウザや支援技術はすべてのコンテンツがページで宣言された言語を使用していると想定します。英語に設定されたスクリーンリーダーは、フランス語のフレーズ、スペイン語の書籍タイトル、またはドイツ語の会社名を英語の発音規則で読み上げようとするため、音声に依存するユーザーには理解不能な出力が生成されます。ブラウザは不適切なスペルチェックルールを適用し、正しくスペルされた外国語の単語をエラーとして表示します。組版エンジンは、言語間で異なる句読点や間隔の規則を誤って処理します。

これらの問題は視覚障害のあるユーザーにとって障壁を作り、支援技術を使用する誰にとってもコンテンツの理解を困難にします。外国語の用語が頻繁に現れる場合や、コンテンツに別の言語での長い文章が含まれる場合、問題はさらに複雑になります。

解決策

外国語のテキストの各部分に、正しい言語を識別するHTML lang属性をマークし、支援技術に一時的に発音エンジンを切り替えるよう指示します。外国語コンテンツを囲む要素に言語属性を追加して、異なるスタイルや処理を適用します。この分離により、スクリーンリーダーは各言語を正しく発音でき、ブラウザは各セグメントに適切な組版とスペルチェックのルールを適用できるようになります。

手順

1. 外国語テキストをマークするコンポーネントを作成する

外国語テキストをlang属性を持つ要素で囲みます。一部のスクリーンリーダーはspan要素の言語属性を無視するため、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文字のコードを使用してください。