WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using <legend> and <fieldset> on a single drop-down.

for

From: Patrick H. Lauke
Date: May 28, 2021 12:40PM

On 28/05/2021 19:27, Graham Armfield wrote:
> In the code provided by Tom, the name attribute on the two radio buttons
> has a different value, so as far as the browser is concerned they are not
> part of the same group. This can cause unexpected behaviour for keyboard
> users who can see they are adjacent, and also for desktop/laptop screen
> reader users.

I assume that was just a typo in the email while jotting down code
quickly. That wouldn't be used in production (I'd hope) because it makes
those radios not mutually exclusive even for mouse/touch users.

> Also, Jean-Pierre has stated that the contents of the <p> element would get
> read out when screen reader user is tabbing through a form. Is that really
> true?

No, here I also assume it was a small mis-writing on JP's part (as later
he says "So with your approach, you will force the screen reader user to
get out of forms mode, read the <p>...")

> Another approach that could be used would be to link the <p> to the radio
> buttons with aria-describedby (like you would with an error message). The
> reading order may not be deal, but the user is getting the required
> information.
And another: use an arbitrary container with role="group", then
associate the element that contains the overarching label/legend with it...

<div role="group" aria-labelledby="foobar">
<p id="foobar">This is the text acting as a legend</p>
<!-- radio buttons here -->
</div>

--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke