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: Laurence Lewis
Date: Jul 22, 2022 2:42PM

Thanks Patrick and Leonie.

I agree, especially after running JAWS on the Medium example, that removes
the radio button semantics via display:none.
Even when I exposed the radio button, radio button checked / unchecked and
the button name did not provide me with any understanding of expected next
action.
Whereas on the ARIA APG Tabs, I got the Tab Role, Tab name and Selected, I
had the expectation of related content for a each named tab.

All the best
Laurence

On Sat, 23 Jul 2022 at 4:00 am, < <EMAIL REMOVED> >
wrote:

> Send WebAIM-Forum mailing list submissions to
> <EMAIL REMOVED>
>
> To subscribe or unsubscribe via the World Wide Web, visit
> https://list.webaim.org/cgi-bin/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> <EMAIL REMOVED>
>
> You can reach the person managing the list at
> <EMAIL REMOVED>
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. CSS only Tab control using a radio button group - Good or Bad
> idea (Laurence Lewis)
> 2. Re: CSS only Tab control using a radio button group - Good or
> Bad idea (Patrick H. Lauke)
> 3. Re: CSS only Tab control using a radio button group - Good or
> Bad idea (Léonie Watson)
> 4. Re: Using the Summary attribute in tables (Geethavani.Shamanna)
> 5. Aside element inside and aside? (Piscitelli, JoAnn)
> 6. Re: CSS only Tab control using a radio button group - Good or
> Bad idea ( <EMAIL REMOVED> )
> 7. Re: CSS only Tab control using a radio button group - Good or
> Bad idea (Birkir R. Gunnarsson)
>
>
>
> ---------- Forwarded message ----------
> From: Laurence Lewis < <EMAIL REMOVED> >
> To: <EMAIL REMOVED>
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 15:56:30 +1000
> Subject: [WebAIM] CSS only Tab control using a radio button group - Good
> or Bad idea
> 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.
>
>
> - How To Build Tabs only with CSS
> <
> https://medium.com/allenhwkim/how-to-build-tabs-only-with-css-844718d7de2f
> >
>
>
> I understand that the Medium website has inherent accessibility problems
> for users so apologies in advance.
>
>
>
> All the best
>
> Laurence Lewis
>
> Accessibility Senior Specialist - Telstra
>
>
>
>
> ---------- Forwarded message ----------
> From: "Patrick H. Lauke" < <EMAIL REMOVED> >
> To: <EMAIL REMOVED>
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 08:30:25 +0100
> Subject: Re: [WebAIM] CSS only Tab control using a radio button group -
> Good or Bad idea
> 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.
>
> --
> Patrick H. Lauke
>
> https://www.splintered.co.uk/ | https://github.com/patrickhlauke
> https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
>
>
>
>
> ---------- Forwarded message ----------
> From: "Léonie Watson" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >, "Patrick H.
> Lauke" < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 08:59:14 +0100
> 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
>
>
>
>
>
> ---------- Forwarded message ----------
> From: "Geethavani.Shamanna" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 11:01:01 +0000
> Subject: Re: [WebAIM] Using the Summary attribute in tables
> Thanks Birkir, this is very useful - just what I needed.
>
> Geetha
>