Multiple parts of a form with regular HTML between #Accessibility

Question

I recently turned a design in to HTML and CSS to be implemented by our back-end developers. For a search result page I used two form tags. One for the search bar and one for the sidebar with filters.

The back-end devs requested if I could just wrap everything in one form tag instead.

Due to the layout and not yet available CSS subgrid the only way to get both parts in one form wrapper is to wrap the entire content (the search results) in a form tag.

Something about this doesn't feel right even though I can't seem to find anything online other than that it is allowed to have regular HTML-tags in a form element.

My solution would be to turn both the form tags into fieldsets with each a legend to indicate what part of the form it is.

Would this be okay accessibility wise? VoiceOver doesn't seem to care about what's inside the form tag. All form fields are listed separately in the Form Controls menu.

Answer 1

interesting problem. A few thoughts/considerations:

Yes, HTML allows you to do it

HTML is like an old dog who still loves you no matter how often you beat it with your slippers, so it takes no offense with this. You can have all kind of stuff in forms, multiple submit buttons, all that. That said...

Accessibility-wise, this is so-so

I haven't tested this, but I can't imagine this being a great experience with a screen reader. And even for the sighted; say the layout breaks down on an older device or CSS not loading, suddenly you have this weird giant form which kind of belongs together but not really...I foresee some mean edge cases here.

That said, it is also not obviously breaking any specific rules or guidelines I am aware of. Apart from that, I think the technical side deserves some consideration here:

What exactly is the gain from doing it in one form?

• I am pretty sure your devs are not doing themselves a favor when they tie two semi-related forms together, because you kind of need to save the state of the other whenever you submit one of them, create interdependence for little reason and multiply possible states.
• Is the sidebar even a real form? Does it have a submit button? If it's just filtering the articles with JavaScript w/o doing an HTTP request I don't think it should be a form as per the HTML spec. If the filtering option are only applied when one presses Search again, I fear that might be not clear from an UX perspective?
• Is the Search even an actual form that is submitted? Nowadays that is actually kind of rare, a lot of search is handled with god knows what libraries and methods (mostly js). If not, some other way might open up anyways.

TLDR: This is mostly alright, see if it survives a screen reader and adapt if necessary. Clarify the technical specs and what exactly does what upon what interaction, and pick the most pragmatic solution.