混合言語コンテンツのマーキング

問題

ページは正しく英語として識別されていますが、外国語の引用、名前、または用語（例えば、フランス語の書籍タイトル）が含まれています。スクリーンリーダーはこのテキストを誤って発音し、ブラウザはすべてのコンテンツが英語であるという前提で動作しているため、不適切なタイポグラフィやスペルチェックを適用する可能性があります。

解決策

外国語のテキストを<span>などのインラインHTML要素で囲み、適切な言語コードを持つ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" 属性に遭遇すると、フランス語の音声に切り替えてフレーズを正しく発音します。ブラウザもこのヒントを使用して、フランス語特有の文字組み（正しい引用符など）を適用したり、英語のスペルチェックからそのフレーズを除外したりすることがあります。