在另一个组件中提交按钮，创建辅助功能问题

Posted 2021-04-08

我有一个反应组件，它会提供付款详细信息的表单。现在，提交按钮正在从同一页面中的另一个组件呈现，并且它按预期工作。

但是，这导致了一个可访问性问题“此表单不包含提交按钮，这会为那些无法使用键盘提交表单的人带来问题。”

我尝试在表单中添加'id'属性，并在按钮上添加'form'属性。但它没有帮助。我怎么能解决这个问题？

形成：

<form id="ccForm">
    <input type="text" className="creditCardNumber" /> 
    ........
    .......
</form>

按钮：

<button for="ccForm">Purchase</button>

答案

使用form属性将按钮与表单所有者相关联的方法应该在符合Web浏览器的情况下工作。

我尝试在表单中添加'id'属性，并在按钮上添加'form'属性。但它没有帮助。我怎么能解决这个问题？

旁白：你说在尝试这个之前表单是有效的，所以我想按钮有一个自定义点击事件监听器，它会触发表单提交？无论如何，我建议使用form属性，因为关联将设置implicit submission，这是正常的预期行为。这很重要：不要假设人们会使用按钮本身。

您遇到的可访问性错误表明可访问性检查器工具本身存在缺陷。

“此表单不包含提交按钮，这会为无法使用键盘提交表单的用户带来问题。”

我搜索了这个确切的错误消息，发现它来自HTML_Codesniffer规则（可能包含在像pa11y这样的工具中）。我查看了Javascript code for the test（在当前版本2.2.0中），它显然只是寻找嵌套在<form>元素内部的提交按钮。

我已经向html_Codesniffer项目提交了一个错误报告来解决这个问题：Check for submit buttons outside of form element, associated using form attribute。更新：现在已修复，将成为下一个HTML_Codesniffer版本。

同时，您应该手动测试表单。表格能否以所有这些方式提交？

• 按钮上的指针单击（鼠标/手指/手写笔触摸）。
• 通过键盘： 当焦点在按钮上时，按enter键或空格键应提交表单 当焦点位于表单内的输入（例如文本字段）时，按Enter键应提交表单。 （这是隐含的提交 - form引用将促进这一点。）
• 使用几个屏幕阅读器重复键盘测试。