1

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.

alaboudi
  • 3,187
  • 4
  • 29
  • 47
  • The correct method should be "1". Fieldset can be added, it will be useful. You can add `aria-current = "step"` to the active section and add `aria-hidden = "true"` to the other steps. See also: https://stackoverflow.com/a/52935539/11151040 – BOZ Mar 15 '21 at 14:51

1 Answers1

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.

Andre Polykanine
  • 3,291
  • 18
  • 28
  • Thanks for the response. The designs I'm following requires a multistep form. That's outta my hands. So are you implying that there is no semantic issues behind dynamically switching forms vs dynamically switching fieldsets? – alaboudi Mar 19 '21 at 15:50
  • I don't think so, no. but please do autofocus the first item of the next step, thus you won't irritate your users with desperate trials to find your next step. – Andre Polykanine Mar 22 '21 at 12:21