辅助功能 屏幕阅读器
为什么
屏幕阅读器对盲人是必需的，对视力障碍者很重要，对有阅读障碍的人很有帮助。
什么
如果没有谈论屏幕阅读器，就很难教授 Web 可访问性。屏幕阅读器已成为 Web 可访问性的代名词，就像轮椅成为可访问性的代名词一样。尽管 可访问性仅适用于盲人或视力障碍者是一种误解，但屏幕阅读器支持是一个强制性主题。
如果您已完成本课程中学到的所有内容，您的网站应该能在屏幕阅读器中良好运行。这并不一定意味着所有盲人用户都能使用它。
顾名思义，屏幕阅读器是一种读取屏幕的工具。对盲人是必需的，对视力障碍者很重要，对有阅读障碍的人很有帮助。
最常见的屏幕阅读器
您将学到四种不同屏幕阅读器的名称。
移动设备
对于移动设备，苹果在屏幕阅读器用户中占有最大的份额。屏幕阅读器 VoiceOver 内置于 iOS 中。第二受欢迎的是适用于 Android 的 TalkBack，它也内置于所有 Android 设备中。
确保您的网站在这两者上都能良好运行是一个好的开始。在我们继续之前，请阅读这些文章：
桌面和笔记本电脑
对于桌面和笔记本电脑，您应该了解两种屏幕阅读器——NVDA 和 JAWS。如果您必须选择一种进行测试，请选择 NVDA。它是免费的，并且其受欢迎程度正在增长。两者都仅适用于 Windows。
如何操作
您需要设置语言，我们将测试两个网站——Toyota 和 Hyundai。
Language（语言）
为了让屏幕阅读器说出正确的语言，它需要知道您内容是什么语言。这通过 `<html>` 元素中的 lang 属性来完成。以下示例指定英语作为语言：
<!DOCTYPE html>
<html lang="en">
`lang` 属性从 `lang="en"` 更改为 `lang="id"`。对屏幕阅读器和搜索引擎都有好处。
部分内容的语言
有时您的部分内容是另一种语言。为了让屏幕阅读器在页面中间更改语言，我们使用相同的 lang 属性。查看关于 英文的阅读障碍页面 上到印度尼西亚语的链接的源代码。
<a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>
现在屏幕阅读器明白了“Bahasa Indonesia”这个词应该用印度尼西亚语阅读，而不是英语。它还理解目标页面是印度尼西亚语，因为有了 hreflang 属性。
屏幕阅读器测试
让我们粗略了解一下屏幕阅读器测试。在本课程中，我们不会深入研究。屏幕阅读器是一个庞大的主题。请使用您的手机来遵循以下两个示例。您听到的可能与此处写的不完全相同，因为有很多因素会影响屏幕阅读器的输出。
丰田
- 在浏览器中打开 toyota.com 并开启 TalkBack 或 VoiceOver。在 Android 上，使用 Chrome。在 iOS 上，使用 Safari。
- 从左到右滑动，到达首页的第一个元素。您将听到类似“跳至主内容…”的声音。很好，一个 跳过链接！
- 滑动到下一个元素。“Toyota 链接主导航栏…”。有点令人困惑？“Toyota”来自带有 `
<title>Toyota</title>` 的 SVG。 - 滑动到下一个元素。“按钮”。这个按钮是做什么的？我们不知道。
- 下一个。“按钮”。什么？
- 下一个。“按钮”。我们放弃吧。
听到标志后，您可能迷失了方向。三个没有可访问名称的按钮。正如您在“角色、名称和值”页面中学到的，所有元素都必须有一个可访问的名称。
如何改进这种体验
- 导航地标上的更好标签。正如您在地标中学到的，如果您有多个相同类型的地标，必须使用 `
aria-label`。Toyota 有多个 `<nav>`，所以他们正确使用了 `aria-label`。然而，属性的值应该是为人类编写的，不带连字符。 `<nav aria-label="main">` 会更好。 - 标志上的更好链接名称。正如您在链接文本中学到的，链接文本应清楚地解释读者点击该链接将获得哪些信息。可以通过在 `
<a>` 上使用 `aria-label="Toyota 首页"` 来改进。 - 第一个“按钮”是一个没有可访问名称的 ``。它打开一个弹出窗口，要求输入邮政编码以查找附近的 Toyota 经销商。这可以通过在 `
<input>` 上使用 `aria-label="输入邮政编码查找附近的经销商"` 来修复。 - 第二个“按钮”与邮政编码按钮相关。它有一个地理位置图标。从可访问性的角度来看，这两个元素应该合并成一个。
- 第三个“按钮”是汉堡包图标。一个 `
aria-label="打开菜单"` 将使其可访问。
这些小改动将改善 Toyota 网站，但无法修复它。使用模态窗口和菜单等组件还需要考虑其他因素。本课程不会详细介绍自定义组件。如果您想了解更多关于这些模式的信息，请访问 WAI-ARIA Authoring Practices 1.1 阅读关于 菜单按钮、模态 和 轮播 的内容。
Hyundai
- 在浏览器中打开 Hyundai Worldwide 并开启您的屏幕阅读器。
- 从左到右滑动，到达首页的第一个元素。“转到菜单”。很好，一个 跳过链接！
- 滑动到下一个元素。“Hyundai World Wide”。可能是我们正在访问的页面。
- 下一个。“Hyundai，链接图像”。可能是标志。
- 下一个。“转到全球分销商页面，按钮”。我们明白这一点，但它是一个按钮吗？
- 下一个。“转到 Channel Hyundai 页面，链接”。可理解。
- 下一个。“搜索，按钮”。完美。
- 下一个。“菜单，按钮”。太棒了。
总的来说，页面的顶部对屏幕阅读器用户是可访问的。以下提示是一些小的改进。
如何改进这种体验
- “Hyundai World Wide”是仅供屏幕阅读器使用的 `<span>`。它在视觉上是隐藏的。目的是告诉用户当前页面的标题。这由于 `
<title>` 元素而显得多余，可以删除。 - 标志更好的 alt 文本。包含链接的意图：`
alt="Hyundai World Wide 首页"`。 - 精简链接和按钮的可访问名称。删除“转到”和“页面”。*全球分销商* 就足够了。
- 根据我们在按钮和链接中学到的，在“全球分销商”链接上使用 `
<a>` 而不是 `<button>`。
现在您已经学习了屏幕阅读器的基础知识。随时探索您的移动设备上内置的其他可访问性选项。尝试使用面部识别，使用切换控件来操作您的手机。
