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

Posted 2023-02-23

【中文标题】另一个组件中的提交按钮创建辅助功能问题

【英文标题】：submit button in a different component creating Accessibility issue

【发布时间】：2019-01-28 09:56:19

【问题描述】：

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

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

我尝试将“id”属性添加到表单，并将“form”属性添加到按钮。但这无济于事。 我该如何解决这个问题？

表格：

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

按钮：

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

【问题讨论】：

***.com/questions/7020659/…

我已经检查过了，但它不能修复可访问性。更多的是关于功能，在我的情况下它已经可以正常工作了。

“此表单不包含提交按钮，这会给无法使用键盘提交表单的人带来问题。” - 是来自可访问性检查工具的报告?如果有，是哪一个？不管可访问性检查工具说什么，表单是否真的有效？你用鼠标、键盘、屏幕阅读器测试过吗？如果您在焦点位于按钮以外的表单元素上时按下回车，它会提交吗？

啊，报告来自html_Codesniffer。我会在下面给出更全面的答案。

【参考方案1】：

使用form 属性将按钮与表单所有者相关联的方法应该适用于符合标准的网络浏览器。

我尝试将“id”属性添加到表单，并将“form”属性添加到按钮。但这无济于事。我该如何解决这个问题？

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

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

“此表单不包含提交按钮，这会导致以下问题 那些无法使用键盘提交表单的人。”

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

我已向 HTML_Codesniffer 项目提交了一份错误报告以解决此问题：Check for submit buttons outside of form element, associated using form attribute。 更新：此问题现已修复，将是下一个 HTML_Codesniffer 版本。

同时，您应该手动测试表单。可以通过所有这些方式提交表单吗？

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

【讨论】：

一位 HTML_Codesniffer 维护者回复了我的错误报告。这个检查是在 HTML5 form 属性出现之前编写的。我们可以期待它在未来的版本中得到解决。

我自己修复了HTML_Codesniffer中的bug，PR已经合并。它将在下一个版本中，无论何时。