Usable and 万博体育官网网址 Form Validation and Error Recovery

介绍

表单验证是一个过程的测试,确保最终用户必要和适当的格式化信息输入web表单错误恢复是一个过程,指导用户完成修复缺失或不当的信息检测到表单验证有几个执行表单验证和错误恢复的方法这些方法通常可以分为,1)服务器端-提交表单信息和分析由web服务器通过一些脚本语言(如PHP、JSP、Perl等)提供必要的反馈消息写入一个新的生成web页面,或者2)客户端表单验证和错误恢复机制是使用JavaScript web客户端或浏览器中执行每个方法有优势。

服务器端验证和错误恢复的优势包括:

  • 完成并提交表单不会中断从验证警告,错误或警告。
  • 功能不需要脚本启用或支持在web浏览器。
  • 更安全的验证机制无法轻易绕过或修改。

客户端验证和错误恢复的优势:

  • 验证可以发生在前的形式完成和表单数据提交到服务器。
  • 功能不需要服务器端脚本。

一些用户可能会禁用脚本因此,开发人员应该不需要客户端脚本为了准确地完成并提交web表单此外,任何客户端验证或信息可以随时修改或禁用Web开发人员可以利用服务器端和客户端验证和错误恢复,以确保他们的形式完成一个可用的和万博体育官网网址方式。

构建可用的形式

作为一名开发人员,确保表单的第一步完成正确是让表单用户友好和万博体育官网网址这可以通过:

  • 提供所有必要的指示和线索。
  • 通过将表单控件与一个文本标签标签元素
  • 将使用复选框和单选按钮组自定义字段和传说
  • 提供一个逻辑顺序阅读和导航。
  • 确保表单可以完成并提交使用键盘
  • 测试表单控件、标签和功能是可以理解的和可用的。

如果表单要求某些控件完成或选择,你应该显示这个用户可用,万博体育官网网址,和明显的方式这些指令通常应该位于毗邻,在所需的表单控件的标签因为屏幕阅读器用户可能从形式控制形式导航控制而不是让屏幕阅读器阅读的线性形式,把这个重要的信息在标签允许屏幕阅读器读它当控制接收焦点标签应充分描述和视觉效果明显。

例子

<标签=“firstname”>名字
<跨风格=“颜色:红”>(必需)< / span > < /标签> < br / >
< input type = " text " name = " firstname " id = " firstname " / >

显示为:


aria-required属性也可以用来识别屏幕阅读器用户必填字段,特别是如果标签文本并不意味着这或者颜色或星号是用来识别所需的字段。

如果信息进入形式必须格式化一个特定的方式,必须提供足够的指令在表单控件的标签或其他相关内容(如aria-describedby)在很多情况下,开发人员可以简化形式,不需要一个特定的格式如果一个精确的格式(比如电话号码)需要进入数据库,例如,脚本通常可以用来对用户输入的信息来匹配所需的格式重新格式化,因此删除这个用户的负担。

隐藏表单标签

有一些情况下,开发人员可能不希望有表单标签出现在他们的视觉形式This is common when using complex forms within tables when table headers identify the function or purpose of multiple form controls within a specific row or column通过查看表头,视觉上明显的哪些信息应该输入到表单控件可能是笨重的视觉显示重复表单标签在整个复杂的形式这是一个复杂的事实标签元素只能关联一个表单控件然而,如果<标识>元素不存在,屏幕阅读器可能不确定形式控制的目的。

有方法隐藏表单标签(和其他元素)在一个web页面不出现视觉,但仍由屏幕阅读器访问然而,视觉上隐藏元素时必须小心你应该问为什么不是有用的或必要的视觉信息,但对屏幕阅读器用户很重要你也必须意识到视觉隐藏表单标签从页面中删除一些功能,用户可以点击表单标签立即访问或激活表单控件的标签相关联这可能特别有助于用户与某些类型的运动障碍。阅读更多关于视觉隐藏表单标签。

表单验证

表单验证通常本身并不构成可访问性问题,因为它通常在幕后进行然而,该方法用于调用表单验证机制必须万博体育官网网址这意味着,如果您使用的是客户端验证,验证和提交过程必须可用鼠标和键盘。

因为你通常不能保证用户的浏览器支持脚本,还必须提交一个真正的URL形式如果脚本不可用你应该避免形式,仅仅依靠脚本函数或事件处理程序,如<表单动作= " # " onsubmit = " validateform()" >形式处理相反,使用一个真正的URL的行动值形式你仍然可以调用客户端验证,第一如果启用了脚本进行处理<form action="submit.php" onsubmit="return validateform()">

错误恢复

如果客户端或服务器端验证检测错误的形式,然后有三步确保可用性和万博体育官网网址错误恢复:

  1. 提醒用户存在一个明显的错误和万博体育官网网址方式。
  2. 允许用户方便地访问需要修改的表单控件。
  3. Allow resubmission and revalidation of the form.

有三个主要方法,这些需求可以得到满足我们将描述为:

  • 错误警报,然后集中
  • 错误在上面
  • 内联错误

没有一种方法是最好的可访问性,但可能有一个最佳的方法根据内容,布局,和复杂性的形式应用。

错误警报,然后集中

第一步是告知用户有一个错误这个错误消息应该是可见的、丰富、直接访问一种方法是使用一个JavaScript警告框或者一个模态对话框,告知用户错误。

JavaScript警告显示所需信息没有提交。

你也可以允许用户直接输入文本响应使用脚本提示。

JavaScript提示输入名字

的优势“警报,然后集中”的方法是,用户立即通知错误,直接就可以轻松地解决问题的主要缺点是只有一个错误表示和处理。

错误在上面

错误消息也可以写入web页面本身当客户端脚本可用,您可以将错误信息写入页面提交表单前与服务器端脚本,您通常生成表单页面,包括最初的形式和相应的消息页面只显示错误信息的反馈,让用户点击返回键修复它们是很困难的他们要求用户记住所有的错误报告然后去前一页,找到这些错误发生最好是重新生成页面,表单的外观和功能类似于原始表单,提交之前,完成正确是不变的。

一想,“错误”的方法会导致错误信息出现在表单When presented, focus should generally be set directly to this error message这使屏幕阅读器和键盘用户直接访问错误消息,而无需找到它在页面的其余部分的内容还应该在视觉上明显的消息焦点可以设置消息的客户端脚本使用JavaScript焦点()或类似的,或注册服务器生成的页面可以包含锚名称的URI(例如,http://myserver.com/form.php errormessage)将焦点直接命名锚或元素id位于反馈消息的开始。

错误消息应该清楚地描述错误存在,优化,包括信号或指令来解决它们例如,“课程数量不正确格式化”帮助不如“课程数必须是一个3位数”它也有助于通知用户发现了错误的数量。

一旦用户已经看到错误消息,你必须提供一种机制来很快给他们访问表单控件,必须纠正您可以提供一个链接在错误消息将集中到适当的表单控件虽然这可以通过使用客户端脚本,它通常更容易(安全)只需提供一个链接,将集中表单控件(如被其独特的id和/或名称)。

的反馈信息提供直接链接到表单控件,需要解决。

“错误”的方法的优点是,所有错误提出了在一起缺点是如果有多个错误,它可以让用户难以记住,所有的发现,和地址。

内联错误

另一种方法是显示错误消息在表单的表单控件,需要注意这种方法需要视觉独特的错误消息所以立即重点是吸引他们错误消息必须有关各自的控制(通过标签或者aria-describedby它可能是有用的设置第一个控制需要注意的焦点。

“内联错误”方法的优点是,错误出现在上下文与各自的控制缺点是用户必须视觉扫描或浏览形式发现无效的控制和各自的错误消息这可能需要一些时间。

aria-invalid

无论用于识别机制和恢复形式错误,aria-invalid = " true "一般应该设置在每一个无效的表单控制这个属性会导致屏幕阅读器识别控制作为“无效”或需要注意。

总结

在所有情况下,小心用户测试通常可以提醒你在表单的可用性困难或问题,验证和错误恢复机制虽然本文只地址几的许多变化,可以用来确保表单的可用性和验证和万博体育官网网址、用户友好的错误恢复,下列一般原则应该被应用:

  • 构建形式,易于使用和直观提供所有必要的指示,提示,提示。
  • 确保表单是键盘万博体育官网网址。
  • 副形式<标识>元素和表单控件。
  • 使用自定义字段和传说把复选框和单选按钮组。
  • 在形式包括必要的指令<标识>元素(例如,要求或特殊格式化的控制)
  • 不依赖于JavaScript在表单提交,验证和错误恢复。
  • 提醒用户的任何验证错误明显和万博体育官网网址方式提供有用的反馈信息。
  • 允许用户方便地访问需要修改的表单控件。
  • 允许重新提交表单信息的重新生效。