网络可访问性：输入类型=“按钮”提交

Question

我有一些使用提交按钮的表单，如下所示：

<input type="button" onclick="validateAndSubmit()">

它们工作正常，但可访问性检查人员说表单中没有提交按钮，因为根本就没有。

我知道 type="button" 清楚地表明它充当按钮，但我不知道如何向辅助技术指示它专门充当提交按钮，而不实际使用 type="submit"。 （我宁愿不使用实际的提交按钮，因为意外的 JavaScript 错误将提交表单。当然，您可以捕获错误，只是从这个意义上来说不太健壮，我想知道是否还有其他方法。）

是否有 ARIA 角色或其他技术可以明确按钮提交表单（假设一切都验证）？

Answer 1

<button type="submit" onclick="validateAndSubmit()">Submit</button> 

应该可以解决问题。在这种情况下，不需要 ARIA 角色 (

button

)，因为此处使用的是 HTML 规范中定义的

button

。

Answer 2

我不同意现有的两个答案。

确实，表单中包含提交按钮并不是一项义务。 但是，如果您的表单要提交，必须有一个提交按钮。

您的按钮

<input type="button" onclick="validateAndSubmit()">

的弱点是您确实必须单击此按钮来触发功能并提交表单。

但是，在任何字段（不一定是提交按钮）中按 Enter 键时提交表单通常很有用，并且大多数用户都期望这样做。 典型用例：输入您的电子邮件、Tab 键、密码，然后直接按 Enter 登录，而不是用鼠标单击“登录”或再按一个 Tab 键并输入。

您的假提交按钮不允许这样做。您应该将其替换为真正的提交按钮

<input type="submit" />

并使用表单上的提交事件 (

<form onsubmit="...">

)。

如果您的问题是意外的 JavaScript 错误导致提交的表单包含错误的输入，请永远不要忘记您必须再次检查输入服务器端。 为了以防万一，如果您通过 AJAX 提交并且不确定您的代码永远不会触发错误，那么您完全可以使用 try...catch...finally 并在 finally 子句中执行

event.preventDefault()

;这不是一个糟糕的防御性编程解决方案。

Answer 3

Form

元素不需要有

submit

按钮。没有这样的义务。

您使用的可访问性检查器对此是错误的。

W3C 在其文档中使用了一些没有提交按钮的表单示例：

最后，为了使表单可提交，我们使用按钮元素：

Answer 4

WCAG 不要求您有提交按钮。然而，wcag 上有推荐的技术，说你可以用它来满足规则 3.2.2。

• 技术：https://www.w3.org/WAI/WCAG22/Techniques/html/H32
• 规则有助于完成：https://www.w3.org/WAI/WCAG22/Understanding/on-input