使文本在屏幕上可制表 reader
Make text tab-able for screen reader
如果出现错误，我会显示一些文本
<div>Error message</div>
当显示错误 div 时，我希望用户能够使用键盘在上面切换，这样它就可以通过屏幕阅读 reader，这样每个人都可以访问它。
虽然有一种简单的方法可以实现这一点，但这并不是屏幕 reader 用户期望使用错误消息的方式：预期是在聚焦输入元素本身时出现错误。
屏幕 reader 支持不是呈现每个人都可以访问的内容。有很多不同类型的残疾，只有一些用户受益于 screen readers。对于其他人，需要其他技术。
例如，颜色对比和在字体大小增加时不会中断的布局可以帮助有视觉障碍的用户，对于那些可以看到但通过键盘导航的用户来说，键盘焦点需要可见。
作为开始，我推荐 W3C 的 Stories of Web Users in How People with Disabilities Use the Web 来了解一下。该网站上的其他文章和视频也做得很好。
任何可访问性技术的基础都是正确构建 HTML、使用标题和地标来定位，并使用语义标签而不是通用的 <div>。
屏幕 reader 用户如何导航
根据当前使用情况，有多种方法可以使用屏幕 reader 导航 document/a 页面：
- 简单地读取页面上的所有元素（包括文本）
- 阅读 next/previous 块内容
- 通过标题列表导航到标题
- 导航到地标列表中的 landmark/form
- 通过 link 的列表导航到 link
- 通过 tab
导航到 next/previous 交互元素
呈现有助于屏幕的错误消息的方面 readers
（屏幕 reader）用户永远不需要 navigate/explore 网站查看是否有错误。应在预期交互后立即宣布错误。
如何实现这一点，取决于您运行进行表单验证的方式。内联、服务器端或客户端。 Web AIM 在 Usable and Accessible Form Validation and Error Recovery.
上有一篇很棒的文章
例如，如果你的错误信息与输入字段相关，并且你有client-side验证，建立它们之间的关系是非常重要的，这通常是通过[=13来实现的=].
<label>Name
<input type="text" name="name" autocomplete="name" aria-invalid="true" aria-describedby="name-err">
</label>
<div id="name-err">Please provide a name</div>
如果验证是 运行 提交，最佳做法是通过 JavaScript .focus().
将焦点设置到第一个错误输入
如何制作任何元素tab-able
tabindex attribute 将呈现可通过 tab 访问的任何元素。您不应将其设置为正值。
<div tabindex="0">Error message</div>
如果您希望元素仅通过 JavaScript（例如提交时）以编程方式接收焦点，而不是通过 tab，您可以使用 tabindex="-1".
如果出现错误，我会显示一些文本
<div>Error message</div>
当显示错误 div 时，我希望用户能够使用键盘在上面切换，这样它就可以通过屏幕阅读 reader，这样每个人都可以访问它。
虽然有一种简单的方法可以实现这一点，但这并不是屏幕 reader 用户期望使用错误消息的方式：预期是在聚焦输入元素本身时出现错误。
屏幕 reader 支持不是呈现每个人都可以访问的内容。有很多不同类型的残疾，只有一些用户受益于 screen readers。对于其他人，需要其他技术。
例如，颜色对比和在字体大小增加时不会中断的布局可以帮助有视觉障碍的用户，对于那些可以看到但通过键盘导航的用户来说，键盘焦点需要可见。
作为开始，我推荐 W3C 的 Stories of Web Users in How People with Disabilities Use the Web 来了解一下。该网站上的其他文章和视频也做得很好。
任何可访问性技术的基础都是正确构建 HTML、使用标题和地标来定位，并使用语义标签而不是通用的 <div>。
屏幕 reader 用户如何导航
根据当前使用情况，有多种方法可以使用屏幕 reader 导航 document/a 页面：
- 简单地读取页面上的所有元素（包括文本）
- 阅读 next/previous 块内容
- 通过标题列表导航到标题
- 导航到地标列表中的 landmark/form
- 通过 link 的列表导航到 link
- 通过 tab 导航到 next/previous 交互元素
呈现有助于屏幕的错误消息的方面 readers
（屏幕 reader）用户永远不需要 navigate/explore 网站查看是否有错误。应在预期交互后立即宣布错误。
如何实现这一点，取决于您运行进行表单验证的方式。内联、服务器端或客户端。 Web AIM 在 Usable and Accessible Form Validation and Error Recovery.
上有一篇很棒的文章例如，如果你的错误信息与输入字段相关，并且你有client-side验证，建立它们之间的关系是非常重要的，这通常是通过[=13来实现的=].
<label>Name
<input type="text" name="name" autocomplete="name" aria-invalid="true" aria-describedby="name-err">
</label>
<div id="name-err">Please provide a name</div>
如果验证是 运行 提交，最佳做法是通过 JavaScript .focus().
如何制作任何元素tab-able
tabindex attribute 将呈现可通过 tab 访问的任何元素。您不应将其设置为正值。
<div tabindex="0">Error message</div>
如果您希望元素仅通过 JavaScript（例如提交时）以编程方式接收焦点，而不是通过 tab，您可以使用 tabindex="-1".