I tweeted this the other day, surprisingly it got lots of interest

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?

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.


177 0 1