标记混合语言内容

问题

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

解决方案

将外语文本包裹在一个内联 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>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

当屏幕阅读器遇到 lang="fr" 属性时，会自动切换为法语语音，以便正确朗读该短语。浏览器也可能利用此提示，应用法语特有的排版（如正确的引号样式），或在英文拼写检查时排除该短语。