标记混合语言内容

问题

一个页面被正确识别为英文，但其中包含外语的引用、名称或术语（例如，法语书名）。屏幕阅读器会错误地发音这些文本，浏览器可能会应用错误的排版或拼写检查，因为它们仍然假设所有内容都是英文。

解决方案

将外语文本包裹在一个内联 HTML 元素中，例如 <span>，并添加带有适当语言代码的 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` 属性

为 <span> 添加带有正确语言代码的 lang 属性。在此情况下，法语的代码是 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>我的博客文章</h1>
      <ArticleText />
    </div>
  );
}

当屏幕阅读器遇到 lang="fr" 属性时，它会切换到法语语音以正确发音该短语。浏览器也可能利用此提示来应用法语特定的排版（例如正确的引号）或将该短语排除在英语拼写检查之外。