揭开屏幕读取器的神秘面纱：可访问的表格和最佳实践

>这是我们有关可访问的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交互的基础。 以下是创建可访问表格的一些最佳实践：

1. > 显式与隐式标签：for当隐式标记（使用<label>...</label>>属性属性属性到链接标签和输入）是可以接受的，而显式标签（
）通常是优选的。

<label for="name">Name:</label> <input type="text" id="name">

2. 必需字段：使用强制性字段的required属性。 始终提供一个视觉提示（例如，星号），以指示所有用户所需的字段。

<label for="email">Email (required):<span style="color:red">*</span></label> <input type="email" id="email" required>

>
3. 使用本机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中文网其他相关文章！