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.
Problem #1: screen readers only announce the inner legend
Let’s say you have appointment times organised by day and period.
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?’
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.)