The problem with nested fieldsets and how to avoid them

In 2016 I worked at the Department for Work and Pensions.

I was working on a complex form field made up of nested fieldsets. It was inaccessible which surprised me because I was only using fieldsets, legends, labels and radio buttons. Nothing fancy.

But as I did more research, it became clearer that nested fieldsets can be problematic.

Here’s why:

Problem #1: screen readers only announce the inner legend

Let’s say you have appointment times organised by day and period.

Screenshot of nested fieldset used for appointment times. The most outer fieldset is date and time. Nested inside that is a fieldset for each day. Nested inside that is a fieldset for morning and afternoon fieldsets. Within those fieldsets are radio buttons for each time.
A fieldset for each day and for morning and afternoon

If the user moves from 3:15pm on Tuesday to 9:55am on Wednesday, screen readers will announce ‘9:55am, morning’. They will not announce ‘Wednesday 23 October’.

This is confusing and may cause users to select the wrong date. Or it may cause them to traverse the page line by line because they don’t trust the interface.

Problem #2: screen readers won’t announce the end of a fieldset

Let’s say you have a question that says ‘Do you like chocolate?’ And selecting ‘Yes’ reveals a nested question that says ‘Do you prefer light or dark chocolate?’

‘Do you like chocolate?’ with yes and no radio buttons. Selecting ‘Yes’ reveals a nested question that says ‘Do you prefer light or dark chocolate?’ with ‘Dark chocolate’ and ‘Light chocolate’ radio buttons.
Radio buttons that reveal another question

If the user moves from ‘Dark chocolate’ to ‘No’, screen readers will not announce that they left the inner fieldset.

This is confusing because ‘No’ does not make sense as an answer for ‘Do you prefer light or dark chocolate?’

Avoid nested fieldsets where possible

For appointment times the fieldset for morning and afternoon could be removed because each label already says ‘am’ or ‘pm’.

For the conditional reveal the nested question could be shown on the next page. This may sound long winded but it usually reduces cognitive load and speeds users up.

(Note: Some nested fieldsets may be okay. For example, I often use them to reveal a date field with day, month and year inputs after selecting ‘Yes’ to knowing that date. This hasn’t raised issues in accessibility audits.)