div vs fieldset elements -- legend validation

Question

I need some advice from the HTML guru's out there.

Semantically I feel FIELDSET best fits a form that contains a list of fields for a user to fill in and submit. However, without a embedded LEGEND element, the page fails HTML 5 validation. We are using an H1 tag to title the form and don't need a LEGEND.

We can add an empty LEGEND element to the FIELDSET and that fixes the validation issue. However is there something better to use for this situation (other than just DIV)?

Appreciate any insights!

Answer 1

A fieldset without a legend should indeed be fine as a means of grouping form inputs. Don't be afraid to use divs or form elements, though, especially if you intend to reuse this code somewhere where you do want something like a legend. This is because fieldsets with legends should be avoided unless you are using them to group a single set of checkboxes or radio buttons.

Why? Some screen readers assume that field sets will only be used that way and are optimized for that use case, causing the screen reader to announce the legend on every single input in the list, making it annoyingly verbose to tab through the inputs and decreasing the accessibility of the form. This is one of those rare cases where you can reduce the usability of your HTML by making it too semantically rich.

For a lengthier explanation, see this old (but still relevant) link: https://web.archive.org/web/20130922062411/http://www.rnib.org.uk/professionals/webaccessibility/wacblog/Lists/Posts/Post.aspx?id=40