WebAIM - Web Accessibility In Mind

E-mail List Archives

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


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
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Léonie Watson
> Sent: Friday, July 22, 2022 3:59 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >; Patrick H. Lauke
> Subject: Re: [WebAIM] CSS only Tab control using a radio button group - Good
> or Bad idea
> As a screen reader user, I agree with Patrick. Hearing that there are radio
> buttons sets up certain expectations about what they are, how they work, and
> what they're for; hearing there is a set of tabs sets up other expectations.
> On 22/07/2022 08:30, Patrick H. Lauke wrote:
>> On 22/07/2022 06:56, Laurence Lewis wrote:
>>> I was directed to a webpage on medium.com, and asked if repurposing a
>>> radio group visually as a TAB control is okay from an accessibility
>>> perspective.
>>> I ask myself why would you, when there is an ARIA Tab control that
>>> serves this purpose, and that the ARIA pattern maps to the
>>> expectation of users because it works the same as a Tab control on
>>> the Windows platform.
>>> I'd like to hear the opinion of other developers and assistive
>>> technology users on the pros and cons of this approach.
>> The one "advantage" for development is that radio buttons give you
>> most of the keyboard behaviour for tabs with automatic activation for
>> free (in terms of only one/the active one gets focus, use cursor keys
>> the change the active one). But conceptually, they can be confusing.
> --
> Léonie Watson (she/her)
> Director
> https://tetralogical.com
> > > http://webaim.org/discussion/archives
> >
> > > > >

Work hard. Have fun. Make history.