无障碍访问

为什么屏幕阅读器需要 lang 属性才能正确工作

只有明确被告知正在阅读什么语言,屏幕阅读器才能正确地朗读你的内容。

这是什么

屏幕阅读器是盲人和视力低下人士使用的软件,它会把页面内容朗读出来,将文字转换成语音。要正确做到这一点,它需要知道该使用哪种语言的发音和声音——法语单词用法语音标发音,英语单词用英语音标发音,以此类推——而它获取这个信息的方式,就是页面 <html> 标签上设置的 lang 属性。

这与我们另一篇从更广泛的技术和 SEO 角度讲解的 lang 属性指南是同一个属性——这里的具体关注点,是当它缺失或错误时,对真正依赖屏幕阅读器的人会发生什么。

为什么重要

如果没有正确设置 lang 属性,屏幕阅读器就得猜测该用哪种语言和声音,而猜错就会产生真正奇怪、有时完全听不懂的结果——例如,一个英语页面被用外语的发音规则朗读出来,可能会把熟悉的单词变成完全不像正常语言的声音。对于依靠这种朗读才能访问你内容的人来说,这不是一个小小的不便;它可能让一个页面在功能上完全无法使用。

这一个属性是现有效果最好、成本最低的无障碍修复之一,正是因为修复本身有多小(一个标签中的一个词)与它出错时能多彻底地毁掉屏幕阅读器用户体验之间的这种巨大反差。

如何解决

  1. 确认 <html> 标签包含与页面实际语言相符的 lang 属性,例如英文用 <html lang="en">
  2. 对于内容涉及多种语言的网站,确保每个特定页面的 lang 属性都与该页面自身的语言相符,而不是全站统一使用一个默认值。
  3. 如果页面中某个特定区域切换了语言(比如一句用另一种语言引用的话),那个区域也可以有自己的 lang 属性,不过页面级别的属性是最先应该设置正确的。
  4. 大多数网站建设工具会根据你网站的整体语言设置自动完成这一点——如果你使用的是这类平台,检查那个全站语言设置,而不是直接编辑代码。
  5. 如果可能,实际用一款免费的屏幕阅读器(比如 Windows 上的 NVDA,或 macOS/iOS 内置的 VoiceOver)测试页面,听听它是如何被朗读出来的。

看看你自己的网站是否也有这个问题

Launch Readiness 会在几秒内检测你的网站是否存在此问题以及其他约 50 个上线前的问题——免费,无需注册。

立即免费检测