Accessible HTML Multistep Form

Question

Are there any accessibility concerns with implementing multi-step forms as 1 big form (1 <form> tag) with multiple fields whose visibility that are handled via javascript logic as opposed to having multiple forms (multiple <form> tags) where the actual forms themselves are managed by javascript.

In short, would you rather:

METHOD 1

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

Another sub-question here if we do pick this method. Should the steps then be fieldset tags?

or

METHOD 2

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

If we choose this way of doing it, is there anything that should be done to tell the user they are on the same form (through attributes or things of the sort)?

If it makes any difference, it may be worth noting that I am developing a single page application.

Answer 1

It's not very clear how you plan to move from one step to another. Anyway:

• Fieldsets won't hurt, especially if you mark up real groups with them (such as radio groups or related checkboxes).
• Make it clear that your user moves to a next step, like: add a Next Step (or Next>) button.
• After your user presses the Next Step button, autofocus the first element of the next step, it greatly helps.

As for single form vs. multiple forms, it's up to you, but I would go for a single form, especially in an SPA.