For Accessibility can you use sections as well as fieldsets in forms to avoid nesting fieldsets?

346 Views Asked by At

I have researched the accessibile use of fieldsets and the consensus seems to be not to nest fieldsets. However in some circumstances I need groups within groups in a single form. Is it OK to use sections with aria-labelledby within forms to contain fieldsets in your code to be accessible?


For example I am wondering if within a single form I can use a section to contain "your details" which contains a few fieldsets with legends and then another section within the form that contains "your child's details" and those inputs, some contained in more fieldsets. This would  mean the fieldsets were nested in sections instead of other fieldsets. Would this still be accessible and symantic HTML? 

Anyone know if this is correct or have an opinion? Cropped down form example below:
`

<form>
  <h2 id="label_parent">Your Details (parent or guardian)</h2>
  <section aria-labelledby="label_parent">
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name"><br>
    <fieldset>
      <legend>Pronoun</legend>
      <label for="he/him">he/him</label>
      <input type="radio" id="he/him" name="parent_pronoun">
      <label for="she/her">she/her</label>
      <input type="radio" id="she/her" name="parent_pronoun">
      <label for="they/them">they/them</label>
      <input type="radio" id="they/them" name="parent_pronoun">
    </fieldset>
  </section>

  <h2 id="label_child">Your Child's Details</h2>
  <section aria-labelledby="label_child">
    <label for="child_name">Full Name</label>
    <input type="text" id="child_name" name="child_name"><br>

    <fieldset>
      <legend>Pronoun</legend>
      <label for="child_he/him">he/him</label>
      <input type="radio" id="child_he/him" name="child_pronoun">
      <label for="child_she/her">she/her</label>
      <input type="radio" id="child_she/her" name="child_pronoun">
      <label for="child_theythem">they/them</label>
      <input type="radio" id="child_they/them" name="child_pronoun">
    </fieldset>
  </section>
  <button>Submit</button>
</form>

`

1

There are 1 best solutions below

0
slugolicious On

I have researched the accessibile use of fieldsets and the consensus seems to be not to nest fieldsets.

Can you post links to the articles that said not to nest fieldsets?

Both nested fieldsets and nested sections are both accessible, if coded properly.

A <section> has a default role of region, provided you specify an accessible name such as aria-labelledby, which you're doing so that's great.

A bonus is that a region is considered a landmark (again, if it has an accessible name) and all the popular screen readers (JAWS, NVDA, VoiceOver) have a shortcut key to navigate by landmarks so it makes it easy to jump to that section. (Confusingly, JAWS calls landmarks "regions" and uses the R key to navigate to them but JAWS' "region" term is not related to the "region" landmark.)

A <fieldset> has a default role of group, which is not a landmark and thus does not have it's own screen reader special shortcut key but you can still quickly navigate to a form element using other shortcut keys. The HTML spec allows fieldsets to be nested, so it's valid HTML. (The "content model" for fieldsets says that it can have a <legend> and "flow content". A <fieldset> itself is considered "flow content" so a <fieldset> can contain a <fieldset>.)

However, one possible drawback with nested <fieldset> elements is that sometimes the <legend> elements are appended together when announced by a screen reader. But that varies by screen reader and depends on how you navigate (whether by tab or the arrow keys or with a screen reader shortcut key). That is, sometimes you might hear concatenated <legend> elements if you navigate one way but not hear them if you navigate another way.