这是我们关于表单可访问性的小系列文章中的第 3 篇文章。如果你错过了第二篇文章，请查看 使用 :focus-visible 管理用户焦点。在这篇文章中，我们将介绍在浏览表单时使用屏幕阅读器以及一些最佳实践。
什么是屏幕阅读器？
当您在网络上浏览时，您可能听说过“屏幕阅读器”一词。您此时甚至可能正在使用屏幕阅读器对您正在构建的体验运行手动辅助功能测试。屏幕阅读器是一种 AT 或辅助技术。
屏幕阅读器将数字文本转换为合成语音或盲文输出，这在盲文阅读器中很常见。
在此示例中，我将使用 Mac VO。 Mac VO (VoiceOver) 内置于所有 Mac 设备； iOS、iPadOS 和 macOS 系统。根据运行 macOS 的设备类型，打开 VO 可能会有所不同。我正在写这篇文章的运行 VO 的 Macbook Pro 没有触摸栏，所以我将根据硬件使用快捷键。
在 macOS 上旋转 VO
如果您使用的是更新的 Macbook Pro，您机器上的键盘将如下图所示。
您将首先按住 cmd 键，然后快速按三下 Touch ID。
如果您使用的是带有 TouchBar 的 MBP (MacBook Pro)，您将使用该快捷方式 cmd+fn+f5 打开 VO。如果您在台式机或笔记本电脑上使用传统键盘，按键应该相同，否则您必须在辅助功能设置中打开 VO。打开 VO 后，您将看到此对话框以及声音VO简介。
如果您单击“使用 VoiceOver”按钮，您就可以很好地使用 VO 来测试您的网站和应用程序。需要记住的一件事是 VO 针对 Safari 进行了优化。话虽如此，请确保在运行屏幕阅读器测试时 Safari 是您正在使用的浏览器。 iPhone 和 iPad 也是如此。
从一开始就可以通过两种主要方式使用 VO。我个人使用它的方式是导航到一个网站并结合使用 tab, control, option, shift 和箭头键，我可以仅使用这些键有效地浏览体验。
导航体验的另一种常见方法是使用 旁白转子。 Rotor 是一项旨在直接导航到您想要体验的位置的功能。通过使用 Rotor，您无需遍历整个站点，将其视为“选择您自己的冒险”。
修饰键
修饰键是您使用 VO 中不同功能的方式。默认修饰键或 VO is control + option 但您可以将其更改为大写锁定或选择两个选项交替使用。
使用转子
为了使用转子，您必须使用修饰键和字母“U”的组合。对我来说，我的修改键是 caps lock。我按 caps lock + U 转子会为我旋转。一旦转子出现，我就可以使用左右箭头导航到我想要的体验的任何部分。
按标题级别导航
导航体验的另一种巧妙方法是通过标题级别。如果您使用修饰键 + 的组合 cmd + H 您可以根据标题级别遍历文档结构。您还可以按 shift 按照这样的顺序，修饰键 + shift + cmd + H.
历史和最佳实践
表单是 HTML 中最强大的原生元素之一。无论您是在页面上搜索某些内容、提交购买表格还是提交调查。表单是网络的基石，也是为我们的体验引入交互性的催化剂。
Web 表单的历史可以追溯到 1995 年 XNUMX 月，当时它在 HTML 2.0 规范。有人说网络的美好时光，至少我是这么说的。 Stephanie Stimac 写了一篇很棒的文章 碎杂志 标题为“标准化 Select 及其他：本机 HTML 表单控件的过去、现在和未来“。
以下是构建可访问的网络表单时应遵循的 5 个最佳实践。
- 确保您使用的是表单元素。默认情况下，表单是可访问的，并且应始终在 div 上使用。
<form>
<!-- Form controls are nested here. -->
</form>
- 请务必使用
for和id属性上label的和input以便将它们联系起来。这样，如果您单击/点击标签，焦点将转移到输入，您可以开始输入。
<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>- 如果需要某个字段才能使表单完整，请使用 required 属性和 aria-required 属性。这些将限制表单的提交。 aria-required 属性明确告诉辅助技术该字段是必需的.
<input type="text" id="name" name="name" required aria-required/>- 使用，
:focus,:focus-within和:focus-visibleCSS 伪类用于管理和自定义用户接收焦点的方式。
form:focus-within {
background-color: #cfffcf;
}
input:focus-within {
border: 10px solid #000000;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid crimson;
border-radius: 3px;
}- A
button用于调用操作，例如提交表单。用它！不要使用创建按钮div的。 Adiv根据定义是一个分隔符。它没有固有的可访问性属性。
演示
如果您想查看代码，请导航至 VoiceOver 演示 GitHub 存储库。如果您想使用您选择的屏幕阅读器尝试上面的演示，请查看 使用 VoiceOver 导航 Web 表单.
屏幕阅读器软件
以下是您可以在给定操作系统上使用的各种类型的屏幕阅读器软件的列表。如果您不选择 Mac 机器，还有适用于 Windows 和 Linux 以及 Android 设备的选项。
NVDA
NVDA 是 NV Access 的屏幕阅读器。目前仅在运行 Microsoft Windows 7 SP1 及更高版本的 PC 上受支持。如需更多访问权限，请查看 NV Access 网站上的 NVDA 版本 2024.1 下载页面!
颚
“我们需要一个更好的屏幕阅读器”
- 匿名
如果您理解上面的参考内容，那么您就处于良好的伙伴关系中。根据 JAWS 网站，简而言之就是这样：
“JAWS（通过语音获取工作）是世界上最受欢迎的屏幕阅读器，专为因视力丧失而无法看到屏幕内容或无法使用鼠标进行导航的计算机用户而开发。 JAWS 为 PC 上最流行的计算机应用程序提供语音和盲文输出。您将能够在办公室、远程桌面或家中浏览互联网、编写文档、阅读电子邮件以及创建演示文稿。”
亲自查看 JAWS 如果该解决方案适合您的需求，请务必尝试一下！
旁白
“讲述人”是 WIndows 11 附带的内置屏幕阅读器解决方案。如果您选择使用它作为屏幕阅读器，下面的链接提供了有关其使用的支持文档。
Orca
Orca 是一个屏幕阅读器，可以在运行 GNOME 的不同 Linux 发行版上使用。
“Orca 是一款免费、开源、灵活且可扩展的屏幕阅读器，可通过语音和可刷新盲文访问图形桌面。
Orca 与支持辅助技术服务提供商接口 (AT-SPI) 的应用程序和工具包配合使用，AT-SPI 是 Linux 和 Solaris 的主要辅助技术基础设施。支持 AT-SPI 的应用程序和工具包包括 GNOME Gtk+ 工具包、Java 平台的 Swing 工具包、LibreOffice、Gecko 和 WebKitGtk。正在寻求 AT-SPI 对 KDE Qt 工具包的支持。”
对讲
Google TalkBack 是 Android 设备上使用的屏幕阅读器。有关打开和使用它的更多信息， 在 Android 辅助功能支持网站上查看这篇文章.
浏览器支持
如果您正在寻找对 HTML 元素和 ARIA（可访问的富互联网应用程序）属性的实际浏览器支持，我建议 HTML 版 caniuse.com 和 ARIA 的辅助功能支持 获取有关浏览器支持的最新 4-1-1。请记住，如果浏览器不支持该技术，屏幕阅读器很可能也不支持。
数字A11Y 可以帮助总结浏览器和屏幕阅读器信息及其文章， 屏幕阅读器和浏览器！哪一个是可访问性测试的最佳组合？
链接
https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac
https://www.w3.org/TR/wai-aria/
https://www.w3.org/WAI/standards-guidelines/aria/
https://support.google.com/accessibility/android/answer/6283677?hl=en
https://support.google.com/accessibility/android/answer/6283677?hl=en
