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

介绍

表单验证是测试过程,以确保最终用户将必要且格式正确的信息输入到Web表单中错误恢复是引导用户修复表单验证检测到的丢失或不正确信息的过程有几种执行表单验证和错误恢复的方法These methods can typically be categorized as being, 1) server-side - the form information is submitted and analyzed by the web server through some scripting language (such as PHP, JSP, Perl, etc.) with necessary feedback messages being written to a new, generated web page, or 2) client-side - form validation and error recovery mechanisms are performed within the web client or browser using JavaScript每种方法都有优点。

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

  • 可以在不中断验证警报,错误或警告的情况下完成和提交表单。
  • 功能不要求在Web浏览器上启用或支持脚本。
  • 更安全 - 验证机制不容易被绕过或修改。

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

  • 表单完成时以及表单数据提交到服务器之前可以进行验证。
  • 功能不需要服务器端脚本。

某些用户可能会禁用脚本因此,开发人员不应要求客户端脚本,以便准确地完成和提交Web表单此外,可以轻松修改或禁用任何客户端验证或信息Web开发人员可以利用服务器端和客户端验证以及错误恢复的优势来确保他们的表单以可用的方式完成。

构建可用表单

作为开发人员,确保您的表单正确完成的第一步是使表单用户友好和万维体育网官网这可以通过以下方式实现:

  • 提供所有必要的指示和提示。
  • 通过使用将表单控件与文本标签相关联标签元素
  • 使用复选框关联复选框和单选按钮fieldset和legend
  • 提供逻辑阅读和导航顺序。
  • 确保表格可以使用完成并提交键盘
  • 测试表单控件,标签和功能是否可理解和可用。

如果您的表单要求完成或选择某些控件,您应该以可用的方式向用户表明这一点,以及明显的方式这些说明通常应位于所需表格控件的标签附近和标签内因为屏幕阅读器用户可以从表单控件导航到表单控件而不是让屏幕阅读器线性地读取表单,所以将这些重要信息放在标签内允许屏幕阅读器在控件获得焦点时读取它标签应该具有足够的描述性,并且在视觉上也应该是明显的。

<label for =“firstname”>名字
<span style =“color:red”>(必填)</ span> </ label> <br />
<input type =“text”name =“firstname”id =“firstname”/>

显示为:


咏叹调,需要attribute也可用于向屏幕阅读器用户标识必需的字段,特别是如果标签文本未指明此内容,或者仅使用颜色或星号来标识所需字段。

如果输入表格的信息必须以特定方式格式化,则必须在表格控件的标签或其他相关内容中提供适当的说明(例如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通过查看表格标题,可以在视觉上明显应该将哪些信息输入到表单控件中在整个复杂形式中可视地显示重复的表格标签可能是麻烦的事实是这一点很复杂标签element只能与一个表单控件关联但是,如果<标签>元素不存在,屏幕阅读器可能无法识别表单控件的用途。

有一些方法可以在网页中隐藏表单标签(和其他元素),因此它们不会在视觉上出现,但仍然可以被屏幕阅读器访问但是,在视觉上隐藏元素时必须始终小心您应该问一个问题,为什么信息在视觉上没用或者必要,但对于屏幕阅读器用户来说很重要您还必须意识到,在视觉上隐藏表单标签会从页面中删除一些功能 - 用户可以单击表单标签以立即访问或激活与标签关联的表单控件这对于某些类型的运动障碍的用户尤其有用。阅读更多关于视觉隐藏表单标签

表格验证

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

因为您通常无法确保用户的浏览器支持脚本,所以如果脚本不可用,表单也必须提交到真实的URL您应该避免仅依赖于脚本函数或事件处理程序的表单,例如<form action =“#”onsubmit =“validateform()”>用于表格处理相反,请为表单使用真正的URL操作值您仍然可以调用客户端验证,如果启用了脚本,它将首先处理 -<form action =“submit.php”onsubmit =“return validateform()”>

错误恢复

如果客户端或服务器端验证检测到表单中的错误,那么有一个3步骤的过程可确保可用和错误恢复:

  1. 以明显的方式警告用户存在错误。
  2. 允许用户轻松访问需要修改的表单控件。
  3. Allow resubmission and revalidation of the form.

有三种主要方式可以满足这些要求我们将它们描述为:

  • 错误警报,然后焦点
  • 错误在顶部
  • 内联错误

没有一种方法最适合可访问性,但可能存在基于它们所应用的表单的内容,布局和复杂性的最佳方法。

错误警报,然后焦点

第一步是通知用户存在错误此错误消息应该是可见的,信息性的,并且可以直接访问一种方法是使用JavaScript警告框或模式对话框来通知用户错误。

JavaScript警报,指示未提交所需信息。

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

用于输入名字的JavaScript提示

“警报,然后关注”方法的优点是用户立即被告知错误,然后可以直接轻松解决问题主要缺点是一次只指示和解决一个错误。

错误在顶部

错误消息也可以写入网页本身当客户端脚本可用时,您可以在提交表单之前将错误消息写入页面使用服务器端脚本,通常会重新生成表单页面以包含原始表单和相应的消息反馈页面只显示错误消息并要求用户点击“返回”按钮来修复它们可能很困难它们要求用户记住报告的所有错误,然后转到上一页并查找发生错误的位置通常最好重新生成页面,以使表单的外观和功能与提交的原始表单类似,以便之前正确完成的表单不会改变。

正如人们所猜测的那样,“顶部错误”方法会导致错误消息出现在表单之前When presented, focus should generally be set directly to this error message这允许屏幕阅读器和键盘用户立即访问错误消息,而不必在其余页面内容中找到它该消息也应该在视觉上明显Focus can be set to the message with client-side scripting using JavaScript focus() or similar, or the server-generated page can include an anchor name in the URI (e.g., http://myserver.com/form.php#errormessage) which will set focus directly to a named anchor or element id located at the beginning of the feedback message.

错误消息应清楚地描述存在的错误,并且最佳地包括解决它们的提示或指令例如,“课程编号格式不正确”没有“课程编号必须是3位数字”那么有用告知用户检测到的错误数量也很有帮助。

一旦向用户显示错误消息,您必须提供一种机制,以便快速授予他们访问必须补救的表单控件的权限。您可以在错误消息中提供一个链接,该链接将焦点设置为相应的表单控件虽然这可以使用客户端脚本来完成,但通常更容易(并且更安全)简单地提供将焦点设置到表单控件的链接(由其唯一ID和/或名称标识)。

反馈消息的示例,它直接提供需要解决的表单控件的链接。

“错误在最顶层”方法的优点是所有错误一起呈现缺点是如果存在多个错误,则用户可能难以记住,查找和解决所有错误。

内联错误

另一种方法是在需要注意的表单控件的上下文中显示表单内的错误消息这种方法需要视觉上独特的错误消息,因此立即将焦点吸引到它们错误消息必须与他们各自的控制相关联(通过标签或可能ARIA-describedby将焦点设置到需要注意的第一个控件可能会有所帮助。

“内联错误”方法的优点是错误出现在各自控件的上下文中缺点是用户必须在视觉上扫描或浏览表单以发现无效控件及其各自的错误消息这可能需要一些时间。

ARIA-无效

无论用于识别和恢复表单错误的机制如何,ARIA-无效= “真”通常应该在每个无效的表单控件上设置此属性使屏幕阅读器将控件识别为“无效”或需要注意。

摘要

在所有情况下,仔细的用户测试通常可以提醒您表单中的可用性,验证和错误恢复机制中的困难或问题虽然本文仅讨论可用于确保表单可用性和验证的多种变体中的一些,以及用户友好的错误恢复,但应遵循以下一般原则:

  • 构建易于使用且直观的表单提供所有必要的说明,提示和提示。
  • 确保表格是键盘万才体育网官网。
  • 关联表格<标签>带有表单控件的元素。
  • 使用字段集和图例来关联复选框和单选按钮组。
  • 在表格中包含必要的说明<标签>元素(例如,必需或特殊格式的控件)
  • 不要仅依靠JavaScript来进行表单提交,验证和错误恢复。
  • 以明显的方式提醒用户任何验证错误提供信息反馈信息。
  • 允许用户轻松访问需要修改的表单控件。
  • 允许重新提交和重新验证表单信息。