WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: CSS only Tab control using a radio button group - Good or Bad idea

for

From: Birkir R. Gunnarsson
Date: Jul 22, 2022 11:45AM


If radiobuttons are used in the right context, they are the perfect
match ofr a tabbed interface.
* makr the radiobutton element as a tab
- mark the selected element with aria-selected="true"
* use aria-labelledby on the radio button pointing to its label
* Mark the tabpanel element with role="tabpanel" also pointing to the
radio button label

There is no native tabbed interface in HTML, you have to simulate one
starting with buttons or radio buttons or spans and use JavaScript to
simulate the expected behavrio (except in the case of radio buttons
you almost don't need it at all, 1 or 2 lines possibly).
If the use case is that of tabs, i.e. selecting the radio button
updates a section of content on the page (the tabpanel), I see 0
reason why this isn't a good idea. In fact it's the simplest idea to
implement the expected keyboard behavior, I have written my own tabbed
example based on radio buttons and used it.

HOwever, if the set of radio buttons is used to select a value from a
set of values on a form, not to display information on the page, they
need to be radio buttons, not tabs.

Like always, it's about
1. understanding the function you want
2. matching it to the right control type, and
3. implement that control with the least amount of work possible.


On 7/22/22, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> I have also seen a navigation menu that used radio buttons as the triggers
> for popup menus. The author was very proud of his no-js solution. However, I
> thought it was awful.
> I wish developers could just let radio buttons be radio buttons.
>
> Jeff Gutsell
>
>
>