RE: Mark-up for radio button groups?

The list markup is superfluous in my view ... lists are document structure
and radio buttons are widgets - there's no good reason for combining the two
in my opinion. 

Saying this as someone who uses a screen reader, please don't associate
large chunks of text with radio buttons ... there's nothing worse when all
you want to do is make a selection like yes or no and it takes forever for
the scrreen reader to announce what is most of the time completely
unnecessary. 

aria-described by is certainly for supplementary information, but it's
arguable that a chunk of text is in fact wholly inappropriate as an
accessible name for a radiobutton grouping.


And, to finish, not everyone who uses a screen reader is 'blind' nor does
every screen reader use TAB to navigate because it's incredibly inefficient
especially with unfamiliar content.








-----Original Message-----
From: Yeti <jbslists@b-a-c.at> 
Sent: Tuesday, September 23, 2025 2:22 PM
To: w3c-wai-ig@w3.org
Subject: AW: Mark-up for radio button groups?

Hello Taliesin and All,

> Any opinions on the accessibility of this pattern?


After checking with FF, NVDA and my own mind, I suggest the
following:

Bind the paragraph with the description to your radio group.
You can do it like this:

...
<p id="energyDes">
  Choose light source for observation window ordered low to high energy.
</p>
<ul role="radiogroup" aria-describedby="energyDes"> ...

Whenever a blind person reaches your radio group with Tab or
Shift+Tab, the description is first read out.

Without these changes, it is up to Coincidence / the combination of browser
and screen reader used, whether and when the description is read aloud.

If you would rather want the heading to be announced, you can achieve this
as follows:

...
<h2 id="energyHead">
  Light Sources
</h2>
...
<ul role="radiogroup" aria-labelledby="energyHead"> ...

You can also combine:

...
<ul role="radiogroup" aria-describedby="energyDes"
aria-labelledby="energyHead">
...

In this case, the following happens when ever the radio group gets the
focus:
- Headline is spoken
- Description is spoken
- Current radio button is spoken


Please consider that many screen readers automatically switch to focus mode
when a radio group is reached and it is the fastest way to use a site like
yours to step through using tab key. This would simply skip your heading and
the description.

You could also spend a tabstopp to the heading and/or the description, but
that would be accessibility with the sledgehammer from the penultimate
decade.


If you want to do the work to do it really standard and modern, use best
fieldset .. legend ... 

Ad Astra 

Yeti

Received on Tuesday, 23 September 2025 07:17:35 UTC