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 05:10:00 UTC