Web Accessibility: Is the form tag required around inputs to be semantic / accessible?

Question

Hey a bit of an odd question..

I am building a web app and I want to make use of form inputs but in some cases I feel the form tag bloats the html. I know that a form tag is not required for validation or for the website to work. But in regards to accessibility does the form tag offer any semantic support for those users?

I have a button which will use the data in the input field so there is no use for submitting a form.

Also the tab index won't matter if there is only one input followed by a button..

<label>
     Some Label: <input type="text" id="input">
</label>

VS

<form>
      <label>
           Some Label: <input type="text" id="input">
      </label>
</form>

Answer 1

Elaborating a bit on my comment, it's probably fine to omit the <form> tag. Since you mention that there is both an <input> element and a <button> on the page, though, I can think of one possible scenario where the <form> tag could help. Presumably, sighted users won't have a problem making the connection between the <input> and the <button>, probably because of the visual layout of the page. If the connection between them is not clear except from the visual layout, however, then users with assistive technology might find the page confusing. In that case, you could make the connection between the elements explicit by wrapping both the <input> and the <button> in a single <form> and giving that form a <legend>. The text of the legend could elaborate on or otherwise clarify the connection. Since sighted users wouldn't need the legend, you could hide the legend from them (by positioning it offscreen, e.g. position: absolute; left: -999999px;) This seems like a pretty rare edge case, but perhaps it applies in your situation. Otherwise, I can't think of any good reason to include the <form>.

Answer 2

But in regards to accessibility does the form tag offer any semantic support for those users?

It could.

If you read one of the techniques for forms in the WCAG (http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G184), you will see that assistive technologies might enable the user to loop back to the very first text in the form to seek instructions when needed.

So if the user had this possibility (although i don't think it has been implemented), it won't find anything if there is no form tag.

Answer 3

This is not required. You might want to outline your form so it could be easily navigated to, i.e.:

<form id="myform" role="form" aria-label="My greatest form">

If you do this, then a screen reader user could easily navigate to the form with his/her region navigation keys. And he/she would easily know where the form starts and ends.
I reiterate, this is not required, it's just more comfortable for screen reader users. If, however, you don't want to attract their attention to the form as a whole, let this alone and do not follow this suggestion.