许多网站和网络应用程序都有用户可以登录、注册、订购产品或发表评论的表单。这些表单通常提供错误处理的方法。
具备处理错误能力的表单
以下视频展示了具备错误处理能力的表单是如何运作的：演示案例
- 用户点击 nomensa.com 网站上的联系表单；
- 在聚焦字段 Your full Name 时，屏幕阅读器读取字段文本；
- 用户输入名字；
- 用户跳转至
电子邮件字段，并输入电子邮件地址；- 用户跳过
电话号码字段，并跳转到Enquiry文本区域；- 用户在
Enquiry文本区域中输入自己的电话号码和备注信息；- 用户提交表单；
- 表单顶部返回错误信息，包含一个指向缺漏字段的链接；
- 用户点击链接，焦点跳转至
电话号码字段；- 用户在
电话号码字段中正确输入信息；
典型的表单错误处理可用性问题
当表单存在标签被截断、输入框对比度不佳等问题时，低视力用户很难找到表单填写区域，找到后也很难明白表单需要输入什么内容。
使用屏幕阅读器的用户常遇到的问题是，当聚集至输入框时，输入框标签无法被读取。当出现错误提示时，表单也不会标记出现错误的位置，这对于盲人用户来说非常不方便。在许多网站上，表单错误提示仅以视觉方式显示，视力障碍用户只能猜测、摸索究竟哪里遇到了问题。
表单有时也引发认知问题。当表单标签不容易理解时，用户需要费劲思考如何填写。比如有的网站在输入框标签中使用技术属于，或者没有提供有效的可供参考的输入示例。还有些情况是，输入字段要求输入某些预期数值类型，但并没有做出对应提示和格式限制。
一些错误示例如下：
- 用户遗漏一个或者多个需要填写的字段
- 用户故意留空某些字段
- 用户在聚焦的输入字段中存在拼写错误
- 用户输入了表单不支持的数据格式
视频示例
在这个页面中，展示了多种用户实际使用网页时存在的问题
- 用户在习惯的右上角位置没有找到“搜索”输入框；
- 输入框设置不当导致没有被认为是一个输入框；
- 表单字段占位符文本对比度低，导致难以识别；
- 标签问题使用了普通用户无法理解的技术术语；
- 屏幕阅读器无法读出页面显示的错误提示；
表单和错误处理的辅助功能提示
- 确保所有表单输入都具有描述性且清晰的标签或名称。在有意义的输入旁边显示预期的格式（例如日期输入的 DD.MM.YYYY）
- 将标签放在输入的上方或左侧（复选框和单选按钮位于右侧）
- 确保标签以编程方式链接到输入框 - 例如，通过使用
label元素引用通过for属性标记的输入 - 不要将占位符文本用作文本字段的唯一标签。当用户写入该字段时，
placehoder属性会消失。如果您必须节省空间，请使用可访问的加载标签（请参阅参考资料部分） - 使用
fieldset和legend在必要时为标记的字段提供上下文 - 例如，区分帐单和送货地址，或为仅根据标签不明确的单选按钮组提供上下文 - 在用户提供特定类型信息（如电话号码、电子邮件地址或密码）的字段上使用 HTML
type属性 - 不要依赖通过
required属性进行的 HTML5 自动错误处理 - 这些错误消息是通用的，会在短时间后消失 - 不要仅依靠颜色来指示有错误的输入（例如，仅将标签文本呈现为红色）
- 确保错误消息文本具有良好的对比度。使用颜色或附加图标使错误消息突出显示
- 如果您在输入附近生成错误消息，请确保它们以编程方式链接到输入（更新
label元素或通过aria-describedby链接消息），以便屏幕阅读器在输入聚焦时读出它们 - 如果您在提交后显示错误消息，同时没有在表单开头放置单独的错误列表，请将焦点设置到出现错误的第一个字段
- 如果在提交表单后显示错误列表，请将其插入表单之前，将焦点设置到列表的开头，并将每条错误消息链接到需要更正的输入框
延展阅读
- Forms Concepts (WAI Web Accessibility Tutorials, 2018)
- Usable and Accessible Form Validation and Error Recovery (Webaim, 2013)
- Simple inline error message pattern (Steve Faulkner, Paciello Group, 2016)
- How to Provide Accessible Error Identification (Jonathan Avila, LevelAccess, 2014)
- Accessible floating labels (Matt Smith, 2016) - warning, labels in examples have insufficient contrast.
- Float label pattern (Brad Frost, 2013) - warning, labels in examples have insufficient contrast.
- Native form validation 1: UI and CSS (Peter Paul Koch, quirksmode, 2017). An in-depth three-part article on different approaches to error handling via native HTML, CSS, and JavaScript features, and conflicts that arise.
- Native form validation 2: HTML and JavaScript (Peter Paul Koch, quirksmode, 2017).
- Native form validation 3: Error messages and recommendations (Peter Paul Koch, quirksmode, 2017).
- HTML 5 specification: Autofilling form controls: the autocomplete attribute