Short note on fieldset and legend semantics
I tweeted this the other day, surprisingly it got lots of interest
πtip: Using a <fieldset> without a, non-empty, <legend> child is the same as using a <div> for screen reader users i.e. it's ignored #a11y #webdevelopment
β Steve Faulkner (@stevefaulkner) April 29, 2019
Why does fieldset/legend work like this?
It's due to the accessibility role, name and property mappings for the fieldset
and legend
elements in the browser.
What is the aural UI of these elements?
The fieldset
element has a group
role, which is a generic role that essentially says "this element groups stuff inside it". Being generic, it is a role applied to lots of container elements in the accessibility tree. If these were all announced by screen readers, the user would hear a lot of noise that actually masked important semantics in the page, thus making the aural UI experience less usable. Think about it in visual terms; imagine every grouping element on the page have a border or background color or other distracting visual identifier...
To mitigate this unecessary verbosity, screen readers only surface the aural UI of an element with a group
role when it has an accessible name. The thinking is that if the element has an accessible name (label) then it is much more likely that it is useful semantic information to let the user know about.
The legend
element itself is exposed with a text
or group
role, depending upon the platform accessibility API and its role is not conveyed to users (as in too much information, thanks but no thanks). The important semantics of the legend
elements is that it has an inbuilt relationship as the provider of an accessible name for its parent fieldset
element.
Relations: IA2_RELATION_LABEL_FOR with the parent fieldset
While it is not the only method to provide an accessible name for a fieldset
it is the default an easiest way, that has additional advantages, in that the presence of a visible group label for a set of controls is useful to many people.
What if I can't use fieldset?
if you can't use fieldset/legend this is ARIA equivalent:
β Steve Faulkner (@stevefaulkner) April 30, 2019
<div role="group" aria-labelledby="legend">
<div id="legend">control group label</div>
...
</div>
You can also provide an accessible name for a fieldset
using aria-label
, aria-labelledby
or (last resort) title
attribute, but only if there is no need to provide a visible group label, which is not often the case.
And remember the title
attribute only acts as an accessible name source if no other sources of an accessible name for an element is present, i.e in the following example the title
is exposed as an accessible description for the fieldset
as the accessible name is provided by the aria-label
.
<fieldset aria-label="neon meat dream of an octofish" title="neon meat dream of an octofish"> ... </fieldset>
This may well result in the aural UI for the fieldset
being something like:
group
neon meat dream of an octofish
neon meat dream of an octofish
Which i think we can all agree is not something that does not suck.