javascript - 不同组件中的提交按钮会造成可访问性问题

Question

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

但是，这会导致辅助功能问题“此表单不包含提交按钮，这会给无法使用键盘提交表单的人带来问题。”

我尝试向表单添加“id”属性，向按钮添加“form”属性。但这没有帮助。我该如何解决这个问题？

表格:

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

按钮:

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

Answer 1

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

I tried adding an 'id' attribute to the form and 'form' attribute to the button. But it doesn't help. How could I fix this?

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

您遇到的辅助功能错误表明辅助功能检查工具本身存在缺陷。

"This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard."

我搜索了这个确切的错误消息，发现它来自 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 属性将有助于实现这一点。)
• 使用一些屏幕阅读器重复键盘测试。