可访问的 HTML 多步骤表单

Question

将多步骤表单实现为 ​​1 个大表单（1 个 <form> 标签）是否存在任何可访问性问题，其中多个字段的可见性通过 javascript 逻辑处理，而不是具有多个表单（多个 <form> 标签），其中实际的表单本身由 javascript 管理。

简而言之，你愿意：

方法一

<form>
 <div id="step-1">
   <input />
   <input />
 </div>
 <div id="step-2">
   ...
 </div>
</form>

如果我们选择这种方法，这里还有一个子问题。那么这些步骤应该是fieldset标签吗？

或

方法 2

<form id="form-1">
 <div id="step-1">
   <input />
   <input />
 </div>
</form>
<form id="form-2">
 ...
</form>

如果我们选择这种方式，是否应该做些什么来告诉用户他们在同一个表单上（通过属性或类似的东西）？

如果有什么不同，可能值得注意的是我正在开发一个单页应用程序。

Answer 1

目前还不清楚您打算如何从一个步骤转移到另一个步骤。无论如何：

• Fieldset 不会受到影响，尤其是当您使用它们标记真实组时（例如广播组或相关复选框）。
• 明确表明您的用户将进入下一步，例如：添加“下一步”（或“下一步>”）按钮。
• 用户按下下一步按钮后，自动对焦下一步的第一个元素，这很有帮助。

至于单一表格与多重表格，这取决于你，但我会选择单一表格，尤其是在 SPA 中。