WebAIM  - 无障碍记

可用的和可访问的表单验万博体育官网网址证和错误恢复

介绍

表单验证测试,以确保最终用户输入必要的和正确的格式信息在网页表单的过程。错误恢复是通过固定由表单验证所检测的缺失或不当信息引导用户的过程。有执行表单验证和错误恢复的几种方法。这些方法通常可以分类为,1)的服务器端 - 形式的信息是通过一些脚本语言(诸如PHP,JSP,Perl等)与必要的反馈消息提交,并通过Web服务器被写入到一个新,生成的网页,或2)的客户端 - 形式验证和错误恢复机制使用JavaScript web客户端或浏览器内执行。有每个方法的优点。

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

  • 该表格可以完成,不中断地验证警报,错误或警告提交。
  • 功能不需要脚本来启用或支持的Web浏览器。
  • 更安全 - 验证机制不能轻易绕过或修改。

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

  • 作为形式完成的确认可以发生之前的表单数据提交到服务器。
  • 功能不需要服务器端脚本。

有些用户可能会禁用脚本。因此,开发者应该不需要客户端脚本,以便于准确地完成并提交web表单。此外,任何客户端的验证的信息可以容易地被修改或禁止。Web开发人员可以利用这两种服务器端和客户端验证和错误恢复的好处,以确保他们的形式在一个可用的和可访问的方式完成。万博体育官网网址

构建可用的形式

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

  • 提供一切必要的指示和提示。
  • 通过使用具有文字标签表单控件关联标签元素
  • 使用相关联的复选框组和单选按钮字段集和传说
  • 提供逻辑读取和导航命令。
  • ,确保表单可以完成并提交键盘
  • 测试该表单控件,标签和功能是可以理解的和可用的。

如果表单要求完成某些控件或选中某些控件,则应该以可用、可访问和明显的方式向用户指示。万博体育官网网址这些指令通常应该位于所需表单控件的标签附近和标签内。因为屏幕阅读器用户可以从一个表单控件导航到另一个表单控件,而不是让屏幕阅读器线性地通读表单,所以将这些重要信息放在标签中可以让屏幕阅读器在控件接收焦点时读取这些信息。标签应该有充分的描述,并且在视觉上很明显。

<标签= >“firstname”第一名
(必需)

显示为:


咏叹调,需要属性还可以用来确定所需的字段屏幕阅读器的用户,特别是如果标签文本不注明,或者如果颜色单独或星号来确定所需的字段。

如果输入到表单中的信息必须以特定的方式格式化,则必须在表单控件的标签或其他相关内容(如with)中提供足够的说明ARIA-describedby)。在许多情况下,开发人员可以不要求特定的格式简化形式。如果一个精确的格式(例如用于电话号码)所需的进入的数据库,例如,脚本通常可用于重新格式化用户输入的信息,以匹配所要求的格式,从而消除来自用户的这种负担。

隐藏表单标签

在某些情况下,开发人员可能不希望表单标签出现在他们的表单中。当表标头标识特定行或列中多个表单控件的功能或用途时,在表中使用复杂表单时,这种情况很常见。通过查看表标头,可以在视觉上清楚地看到应该在表单控件中输入哪些信息。在整个复杂表单中可视化地显示重复的表单标签可能很麻烦。这是一个复杂的事实标签元素只能与一个表单控件关联。然而,如果<标识>元素不存在时,屏幕阅读器可能无法识别形式的控制的目的。

有在网页中隐藏表单标签(和其他元素)的方法,这样他们就不会在视觉上出现,但仍然被屏幕阅读器访问。但是,必须始终在视觉上隐藏要素拍摄。你应该问的问题,为什么信息是不是有用或必要的视觉,但屏幕阅读器用户重要。你也必须意识到,在视觉上隐藏表单标签去除页面的某些功能 - 用户可以在表单标签点击立即访问或激活与该标签相关的表单控件。这对于某些类型的运动障碍的用户特别有用。阅读有关可视化隐藏表单标签的更多信息。

表单验证

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

因为你通常不能保证用户的浏览器支持脚本,表单还必须提交真实网址,如果脚本不可用。你应该避免单纯依靠脚本函数或事件处理程序的形式,如<表单动作= " # " onsubmit = " validateform () " >对于表单处理。相反,使用的形式真实URL操作价值。您仍然可以调用客户端验证,它会首先被处理,如果启用脚本 -<形式行动= “submit.php” 的onsubmit = “返回validateform()”>

错误恢复

如果客户端或服务器端验证检测到表单中的错误,那么有一个3步过程来确保可用和可访问的错误恢复:万博体育官网网址

  1. 提醒用户该错误的一个明显的和可访问的方式存在。万博体育官网网址
  2. 允许用户容易地访问表单控件需要进行修改。
  3. 允许重新提交和重新验证表单。

有些情况下,这些需求都可以得到满足三种主要方式。我们将他们描述为:

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

没有一种方法是最好的可访问性,但也有可能是基于内容,布局,以及它们应用到表格的复杂性的最佳手段。

错误警报,然后集中

第一步是通知用户有一个错误。此错误消息应该是可见的,内容翔实,并直接访问。一种方法是使用JavaScript警告框或者一个模式对话框,告知用户出现错误。

没有提交JavaScript警告,表明所需要的信息。

到优势“警报,然后集中”的做法是,用户错误立即通知并可以很容易直接解决问题。主要的缺点是,只有一个错误指示,并且在时间寻址。

错误在上面

错误信息也可以写入网页本身。当客户端脚本可用,你可以在提交表单之前写的错误信息页面。随着服务器端脚本,通常要重新生成表单页面包含原始形式和相应的消息。只显示错误消息,并要求用户点击后退按钮来解决这些问题反馈页面是很困难的。它们要求用户记住所有报告的错误,然后转到以前的页面并找到这些错误时有发生。它通常是最好重新生成页面,以便使被提交,以便以前正确填写表格的外观和功能的原始形式类似都不变。

正如人们所猜测的,“错误之上”的做法引起形式出庭的错误消息。当呈现,重点应通常被直接设置到该错误消息。这使得屏幕阅读器和键盘用户立即访问该错误信息,而无需找到它之间的页面中的其他内容。该消息还应该是视觉上明显的。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孤单。
  • 提醒任何验证错误的用户中的表观和可访问的方式。万博体育官网网址提供有价值的反馈信息。
  • 允许用户容易地访问表单控件需要进行修改。
  • 允许的形式重新提交信息并重新验证。