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: jeffgutsell@fuse.net
Date: Jul 22, 2022 11:27AM

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 < <EMAIL REMOVED> >
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