多言語コンテンツのマーキング

スクリーンリーダーの正確な発音を確保する

問題

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

解決策

外国語のテキストを<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"属性を検出すると、フランス語の音声に切り替えて、そのフレーズを正しく発音します。ブラウザはこのヒントを使用して、フランス語固有のタイポグラフィ(正しい引用符など)を適用したり、英語のスペルチェックからそのフレーズを除外したりすることもあります。