>这是我们有关可访问的Web表单的系列中的第三部分。 如果您错过了上一篇文章，请查看“以以下方式管理用户焦点：focus-Visible”。本文探讨了表格中的屏幕阅读器导航，并概述了可访问表格设计的最佳实践。
编辑注：本文已更新以反映当前的最佳实践，并包括其他代码示例。 欢迎您的反馈！>
了解屏幕读取器
屏幕读取器是将数字文本转换为音频或盲文的辅助技术（AT）。 它们是视力受损用户的重要工具。 本指南以Mac Vo（VoiceOver）为例，是Apple设备的内置屏幕读取器。 激活和使用VO的特定方法可能会根据您的设备而略有不同。
>
激活MacOS上的画外音
在新的MacBook Pros上，通过按住命令键并迅速按Touch ID三次来激活VO。 较旧的MacBook专业人士（带触摸栏）使用快捷方式CMD FN F5。 对于传统键盘，请使用同等快捷方式或通过可访问性设置启用VO。 激活后，VO提供了一个介绍性消息。
>您可以使用选项卡，控件，选项，换档和箭头键的组合进行导航，也可以利用VoiceOver转子进行更直接的导航。
Voiceover中的
修饰符键
>默认的配音修改器键是控制选项，但是可以将其自定义为caps锁定或两者的组合。
>使用配音转子
>
>使用修饰符键“ U”（例如，盖帽u）激活转子。 使用左和右箭头键在不同的选项中导航。
>通过标题级别导航
>使用修饰符键CMD H通过标题级别导航。使用修饰符键移动CMD H向上移动文档结构。>
Web表单的最佳实践
Web表单是Web交互的基础。 以下是创建可访问表格的一些最佳实践：
- > 显式与隐式标签：
for当隐式标记（使用<label>...</label>>属性属性属性到链接标签和输入）是可以接受的，而显式标签（ ）通常是优选的。
<label for="name">Name:</label> <input type="text" id="name">
登录后复制
-
必需字段：使用强制性字段的
required属性。 始终提供一个视觉提示（例如，星号），以指示所有用户所需的字段。
<label for="email">Email (required):<span style="color:red">*</span></label> <input type="email" id="email" required>
登录后复制
> - 使用本机HTML按钮：始终使用元素进行表单提交；避免使用样式为按钮的Divs。
<button></button>
>演示和资源
>有关代码示例，请访问。 使用VoiceOver的实时演示可以在
上可用，以
。
> 屏幕读取器软件选项>
> nvda： Windows的免费和开源屏幕读取器。
> jaws：
>一个流行的Windows商业屏幕读取器。-
叙述者：
> Windows 11的内置屏幕读取器。
-
orca：>基于GNOME的Linux发行版的屏幕读取器
-
对话： Android的内置屏幕读取器。
-
>浏览器和屏幕读取器兼容性
- >
有关HTML元素和ARIA属性的浏览器支持的信息，请咨询Caniuse.com和ARIA的可访问性支持文档。 请记住，屏幕阅读器的兼容性取决于浏览器支持。 Digitala11y的文章“屏幕读取器和浏览器！哪种是可访问性测试的最佳组合？”提供有用的见解。
确认
感谢Adrian Roselli，Karl Groves，Todd Libby，Scott O’Hara，Kev Bonnett等人的贡献。
进一步阅读
Apple VoiceOver支持
> wai-aria创作实践
HTML
- > wai-aria
- Google Talkback支持
- 了解屏幕读取器交互模式
- 必需的属性要求
以上是揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践的详细内容。更多信息请关注PHP中文网其他相关文章！
