我有一个 react 组件,它呈现付款详细信息的表单。 现在,提交按钮正在从同一页面中的另一个组件呈现,并且它按预期工作。
但是,这会导致辅助功能问题“此表单不包含提交按钮,这会给无法使用键盘提交表单的人带来问题。”
我尝试向表单添加“id”属性,向按钮添加“form”属性。但这没有帮助。 我该如何解决这个问题?
表格:
<form id="ccForm">
<input type="text" className="creditCardNumber" />
........
.......
</form>
按钮:
<button for="ccForm">Purchase</button>
最佳答案
使用 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
属性将有助于实现这一点。)
- 使用一些屏幕阅读器重复键盘测试。
关于javascript - 不同组件中的提交按钮会造成可访问性问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51961759/