原作者：Rob Copeland（前端开发工程师）译者：李福东

当谈论信息无障碍（尤其对读屏器友好）的问题时，我总是会听到“只需要语义标记就好了”的观点。这种观点认为，语义标记在信息无障碍领域使用是如此的广泛和密集。但是！语义标记真的就能够全部覆盖吗？我们在意信息无障碍，但却不能花大量的时间去阅读晦涩的大部头、研究如何将我的标题和辅助功能变的更友好。

我的问题是：除了语义标记之外，还有没有什么方法能够更轻松地实现信息无障碍？（请记住，这就是我想要做的）

为了回答这个问题，我（作者）决定从最明显的地方——表单开始。

读屏器Screen readers

首先要解决的是，我将选择什么读屏器？如何评估自己努力的效果？

Fromhttp://webaim.org/projects/screenreadersurvey5/#used

毫无疑问，选择使用量最大的读屏器是最合理的。使用量最多的前两位读屏器的JAWS、NVDA均只有windows版，但是我使用的是Mac，于是只能选择排名第三的Mac VoiceOver来评估（37%其实也还是比较高的）。

基本的语义表单

基于本文目的，我有了如下这样的最基本的注册表单：

Username

Password

本例中，只有几个标签、输入框、一些用于验证的占位符（具体是前端验证还是后端验证对此不影响）。

VoiceOver会怎么朗读这个表单?

取得焦点状态的Username文本框

当我们将光标聚焦在username文本框中，VoiceOver读出:

“Username, edit text”（用户名，编辑文本）

移动到password文本框:

“Password, secure, edit text”（密码，安全，编辑文本）

读出id对应的属性，这是目前最好的处理方式，对吗？阅读标签让用户意识到所处的语境、知道何时可以输入。甚至能够在password文本框中读出“secure”（安全）。

是不是有些遗漏?

取得焦点状态的Username文本框（已输入无效字符）

这幅截图表明了在输入无效字符的时候，Javascript加载后对文本框进行了标红处理，提示此文本框输入有误（对于视力正常用户有效）。但是VoiceOver此时会如何表现？

“Username, edit text”（用户名，编辑文本）

根本就没有提示输入不对！

当某个元件处于焦点状态时，我期望的是读屏器能够提示“输入错误”，甚至可以告诉用户为什么输出不正确（提示用户如何更正输入）。

如何改进－提示错误位置？

这正是我们可以得到改善的地方。首先要表明某个文本框输入错误，它会这样读：

取得焦点状态的Username文本框（已输入无效字符）

“Username, invalid data, edit text”（用户名，输入无效，编辑文本）

这样就更好一些，因为用户能够知道究竟是在哪个文本框位置出错了。

这非常容易实现、也很易——只需要在输入无效时提供参数:

aria-invalid=”true”

Javascript或其他语言在校验输入合法性时就能轻松实现。

如何改进－实现无效原因的提示？

如果在字段无效时，读屏器能够读出错误的原因会非常好。

其实很简单，你只需要在帮助文本（‘Helper text’）中加入验证信息说明即可。任何输入文本框中已经定义的验证信息

aria-describedby=””

都能够作为特定输入的帮助标签（Help Tag）而被大声朗读出来。例如

取得焦点状态的Password文本框（已输入无效字符，出现了验证信息）

在取得焦点状态的Password文本框，如果输入无效并出现了验证信息，读屏器将读出：

“Password, invalid data, secure, edit text”（密码，无效输入，安全，编辑文本）

一切看似妥当，但是我们定义的验证信息去哪里了？

嗯…这需要使用aria-describedby，这一段将会在逗点后面读出来。因此在朗读出“无效输入”后，会继续朗读：

“The Help Tag is: Passwords are supposed to be a secret.”（帮助标签：密码应该是一个秘密）

如果读屏器读出的帮助文本可以告知用户某个文本框输入错误、并立即给出了改正的提示线索（线索是我们提供的）。这样的帮助信息会非常有意义。

JavaScript处理起来也相当容易，因为每一个文本框都存在唯一的ID，你可以在验证信息的文本框中预设内容（如：‘error-’），来生成新的唯一ID并设置对应的验证信息。

仅此而已？

确实，这就是我目前为止所取得的成绩。但没有什么理由能够值得让我们慢下脚步——如果我们真正关心着每一个打开我们网站网页的人的话。

［译后记］前端本不是我擅长的内容，但基于对于信息无障碍的兴趣，愿意翻译介绍，希望以自己微薄之力推进信息无障碍进程。另：文中配图等信息来源于原文。

原文地址：https://medium.com/@roblcopeland/how-can-i-make-my-forms-a-little-more-accessible-1726d63210f2