The problem with nested fieldsets and how to avoid them

This content originally appeared on Adam Silver and was authored by Adam Silver

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.

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.)

This content originally appeared on Adam Silver and was authored by Adam Silver

Print Share Comment Cite Upload Translate Updates

APA

Adam Silver | Sciencx (2023-05-28T00:00:00+00:00) The problem with nested fieldsets and how to avoid them. Retrieved from https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/

MLA

" » The problem with nested fieldsets and how to avoid them." Adam Silver | Sciencx - Sunday May 28, 2023, https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/

HARVARD

Adam Silver | Sciencx Sunday May 28, 2023 » The problem with nested fieldsets and how to avoid them., viewed ,<https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/>

VANCOUVER

Adam Silver | Sciencx - » The problem with nested fieldsets and how to avoid them. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/

CHICAGO

" » The problem with nested fieldsets and how to avoid them." Adam Silver | Sciencx - Accessed . https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/

IEEE

" » The problem with nested fieldsets and how to avoid them." Adam Silver | Sciencx [Online]. Available: https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/. [Accessed: ]

rf:citation

» The problem with nested fieldsets and how to avoid them | Adam Silver | Sciencx | https://www.scien.cx/2023/05/28/the-problem-with-nested-fieldsets-and-how-to-avoid-them/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.