1

Should those single inputs be wrapped in <form> tags so that screen readers can announce them as such?

Sometimes in our project (Web based SaaS) we use single input fields to operate some controls over the visible UI. Some common cases would be:

  • One or two comboboxes (dropdown inputs) to filter the content of a list/table
  • A switch to enable/disable some part of the visible UI
  • A date picker to move a calendar to the input date

All those don't need a confirmation button to have effect so, should they be wrapped into a <form> tag to be properly accessible?

Improve this question
2
  • Have you tried using the page where these inputs are with a screen reader, such as NVDA. That should give you some idea on how they behave. Can't remember whether <input> without <form> around it is valid HTML.
    – locationunknown
    Aug 9, 2022 at 10:14
  • 2
    It is valid: “If a form-associated element is not associated with a form element, its form owner is said to be null.” from Association of controls and forms in the HTML Standard
    – Andy
    Aug 10, 2022 at 8:09

1 Answer 1

Reset to default
0

Static website: Not only for the accessibility, but we also have to teach the browser that these elements belong to forms. Since we don't have to submit button or not keeping those in a tag is recommended.

For dynamic apps: that's not necessary.

Improve this answer
3
  • 1
    How exactly do you draw the line between static and dynamic, website and app? The presence of Javascript? So you mean to be able at all to produce new content, you’d need to submit a form, which renders a form necessary. Is that it? And I don’t understand why you say “not only for accessibility”. Would you mind explaining why that applies to static sites but not to apps?
    – Andy
    Aug 10, 2022 at 8:08
  • The app might have many variants of forms, for example, one page may have only a search box, one page may have a check box to choose a list, and one page may have only a button to load more contact.. all these do not form elements? and we use <form> tab for each of these? Static websites are created for marketing purposes or SEO ranking purposes so we have to follow all the rules as per W3C in order to get ranked. For instance, a page must have one <h1> tag, page should have <meta>, all the abbreviations should written like <abbr text="Thank You">TY</abbr>.
    – Saravanan Kasi
    Aug 16, 2022 at 13:17
  • This being a UX group, not a SEO group, static or dynamic sites are immaterial. Once a page loads and someone is using it, accessibility applies.
    – bloodyKnuckles
    Jan 6 at 13:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.