无障碍 屏幕阅读器
为什么
屏幕阅读器对于盲人来说是必需的，对于视力部分障碍的用户来说很重要，对于有阅读障碍的人来说也很有用。
什么
在不谈论屏幕阅读器的情况下，很难教授关于网络无障碍的知识。屏幕阅读器已经成为网络无障碍领域中的轮椅。尽管无障碍并非只针对盲人或视力部分障碍的用户是一个神话，但屏幕阅读器支持是一个必须讨论的主题。
如果你已经完成了本课程中所学的所有内容，那么你的网站很可能在屏幕阅读器中运行良好。但这并不一定意味着所有盲人用户都能使用它。
顾名思义，屏幕阅读器是一种读取屏幕内容的工具。对于盲人来说是必需的，对于视力部分障碍的用户来说很重要，对于有阅读障碍的人来说也很有用。
最常见的屏幕阅读器
你将学习四种不同的屏幕阅读器的名称。
移动设备
对于移动设备来说，苹果拥有最大的屏幕阅读器用户群体。VoiceOver 屏幕阅读器内置在 iOS 中。第二受欢迎的是 TalkBack，它也内置于所有 Android 设备中。
确保你的网站在这两种屏幕阅读器中运行良好是一个良好的起点。在继续之前，请阅读以下文章
台式机和笔记本电脑
对于台式机和笔记本电脑，你应该了解两种屏幕阅读器 - NVDA 和 JAWS。如果你必须选择一个进行测试，请使用 NVDA。它是免费的，并且越来越受欢迎。两者仅适用于 Windows。
如何
你需要设置语言，然后我们将测试两个网站 - Toyota 和 Hyundai。
语言
为了让屏幕阅读器说出正确的语言，它需要知道你的内容是什么语言。这可以通过在 <html> 元素中使用 lang 属性来完成。以下示例指定英语为语言
<!DOCTYPE html>
<html lang="en">
- 检查英语 关于诵读障碍的维基百科文章的源代码。
- 点击语言 Bahasa Indonesia。
- 再次检查源代码。
lang 属性从 lang="en" 更改为 lang="id"。这对于屏幕阅读器和搜索引擎来说都是有利的。
部分内容的语言
有时你的内容的一部分会使用另一种语言。为了让屏幕阅读器在页面中间更改语言，我们使用相同的 lang 属性。检查 关于诵读障碍的英语页面上指向 Bahasa Indonesia 的链接的源代码。
<a href="https://id.wikipedia.org/wiki/Disleksia" lang="id" hreflang="id">Bahasa Indonesia</a>
现在屏幕阅读器了解到 "Bahasa Indonesia" 应该用 Bahasa Indonesia 语言阅读，而不是英语。它还了解目标页面是 Bahasa Indonesia 语言，因为存在 hreflang 属性。
屏幕阅读器测试
让我们简单了解一下屏幕阅读器测试。在本课程中，我们不会深入探讨。屏幕阅读器是一个很大的主题。使用你的手机来跟随这两个示例。你可能听不到这里写的完全一样的内容，因为影响屏幕阅读器输出的因素很多。
Toyota
- 在你的浏览器中打开 toyota.com 并打开 TalkBack 或 VoiceOver。在 Android 上使用 Chrome。在 iOS 上使用 Safari。
- 从左向右滑动，到达首页的第一个元素。你将听到类似 "Skip to main content …" 的内容。很好，一个 跳过链接！
- 滑动到下一个元素。 "Toyota link main-navigation-bar …"。有点混乱？"Toyota" 来自带有
<title>Toyota</title>的 SVG。 - 滑动到下一个元素。 "Button"。这个按钮有什么作用？我们不知道。
- 下一个。 "Button"。什么？
- 下一个。 "Button"。让我们放弃吧。
在听到 logo 后，你可能迷路了。三个按钮没有无障碍名称。正如你在页面 角色、名称和值 中所学的那样，所有元素都必须有一个无障碍名称。
如何改进这种体验
- 导航地标上的更好的标签。正如你在 地标 中所学的那样，如果你有多个相同的地标，则必须使用
aria-label。Toyota 有多个<nav>，因此他们使用了aria-label，正如他们应该做的那样。但是，属性的值应该为人类编写，不使用连字符。<nav aria-label="main">会更好。 - logo 上的更好的链接名称。正如你在 链接文字 中所学的那样，链接文字应该清楚地解释单击该链接后读者将获得哪些信息。这可以通过在
<a>上使用aria-label="Toyota front page"来改进。 - 第一个 "Button" 是一个没有无障碍名称的 <input type="button">。它会打开一个模态窗口，要求输入邮政编码以查找附近的 Toyota 经销商。这可以通过在
<input>上使用aria-label="Enter zip code to find a dealer nearby"来解决。 - 第二个 "Button" 与邮政编码按钮相关。它有一个地理位置图标。从无障碍的角度来看，这两个元素应该合并成一个。
- 第三个 "Button" 是汉堡菜单图标。一个
aria-label="Open menu"将使其具有无障碍性。
这些小的更改将改进 Toyota 网站，而不是修复它。使用模态窗口和菜单等组件还需要考虑其他因素。本课程不会深入介绍自定义组件的细节。如果你想了解更多关于这些模式的知识，请访问 WAI-ARIA 编写实践 1.1，阅读关于 菜单按钮、模态窗口 和 轮播 的内容。
Hyundai
- 打开 Hyundai 全球 并打开你的屏幕阅读器。
- 从左向右滑动，到达首页的第一个元素。 "Go to menu"。很好，一个 跳过链接！
- 滑动到下一个元素。 "Hyundai World Wide"。可能是我们所在的页面。
- 下一个。 "Hyundai, link image"。可能是 logo。
- 下一个。 "Go to global distributors page, button"。我们理解这一点，但它是一个按钮吗？
- 下一个。 "Go to channel Hyundai page, link"。可以理解。
- 下一个。 "Search, button"。完美。
- 下一个。 "Menu, button"。很棒。
总体而言，页面的顶部部分对于屏幕阅读器用户来说是无障碍的。以下提示是一些小的改进。
如何改进这种体验
- "Hyundai World Wide" 是一个仅供屏幕阅读器使用的
<span>。它是视觉隐藏的。目的是告诉用户当前页面的标题。这与<title>元素是重复的，可以删除。 - logo 上更好的 alt 文本。包括链接的意图：
alt="Hyundai World Wide front page"。 - 简化链接和按钮上的无障碍名称。删除 "Go to" 和 "page"。Global distributors 就足够了。
- 在全球经销商链接上使用
<a>而不是<button>，正如我们在 按钮和链接 中所学的那样。
现在你已经学习了屏幕阅读器的基础知识。随意探索你的移动设备中内置的其他无障碍选项。尝试使用面部或开关控件来操作你的手机。
