What does this mean?
This indicates that the fieldset is missing an accessible name, usually provided by a legend element (but potentially via aria attributes).
It might be that there is actually a legend element present but it has no content assigned.
For example this will generate this issue because of the empty legend:
<fieldset>
<legend></legend>
<input type="radio" name="contact" id="email"><label for="email">Email</label>
<input type="radio" name="contact" id="phone"><label for="phone">Phone</label>
<input type="radio" name="contact" id="text"><label for="text">Text</label>
</fieldset>
or the copy which should be a legend is not marked up as such.
For example, visually these radios have a question associated, but as it is not marked up as a legend it does not form part of the accessible name:
<h2>Are you sure?</h2>
<fieldset>
<input type="radio" name="delete" id="yes"><label for="yes">Yes</label>
<input type="radio" name="delete" id="no"><label for="no">No</label>
</fieldset>
A screen-reader user moving through the form by moving from control to control will not hear the copy in the h2, so they will just hear "Yes" or "No" and not understand the question being asked.
Impact on users
This means that the fieldset is missing an accessible name. An accessible name is important as a fieldset acts as a grouping element to the items inside it and it's accessible name provides context to those items.
A fieldset with an accessible name also makes it clear to screen-reader users when they are entering or leaving that group of elements, which is especially useful information when dealing with checkboxes or radios.
How to fix
We should be using a fieldset with a legend as the first element inside it. There are ways of marking this up using aria but they present support issues.
In our example, by moving the question into a legend within the fieldset (instead of a h2 sitting outside it) we make it much clearer:
<fieldset>
<legend>Are you sure?</legend>
<input type="radio" name="delete" id="yes"><label for="yes">Yes</label>
<input type="radio" name="delete" id="no"><label for="no">No</label>
</fieldset>
Now a screen-reader user moving through the form by moving from control to control will hear
"Are you sure? Yes"
"Are you sure? No"
as they land on each radio (exactly how it is announced is different depending on the screen-reader).
Check that the legend element actually contains appropriate copy.
If you absolutely need to use aria, make sure you are using it correctly. The fieldset (or element with role="group") should have either an aria-label or aria-labelledby attribute.
References
- Fieldset guidance - GOV.UK
- Checkbox guidance - GOV.UK
- Radio guidance - GOV.UK
- How screen-readers work with grouped fields:
- Fieldsets, legend and screen-readers again - TPGi
- Use legend and fieldset - Adrian Roselli