E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Laurence Lewis
Date: Thu, Jul 21 2022 11:56PM
Subject: CSS only Tab control using a radio button group - Good or Bad idea
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Fri, Jul 22 2022 1:30AM
Subject: Re: CSS only Tab control using a radio button group - Good or Bad idea
← Previous message | Next message →

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

From: Léonie Watson
Date: Fri, Jul 22 2022 1:59AM
Subject: Re: CSS only Tab control using a radio button group - Good or Bad idea
← Previous message | Next message →

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

From: jeffgutsell
Date: Fri, Jul 22 2022 11:27AM
Subject: Re: CSS only Tab control using a radio button group - Good or Bad idea
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Fri, Jul 22 2022 11:45AM
Subject: Re: CSS only Tab control using a radio button group - Good or Bad idea
← Previous message | Next message →

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

From: Laurence Lewis
Date: Fri, Jul 22 2022 2:42PM
Subject: Re: CSS only Tab control using a radio button group - Good or Bad idea
← Previous message | No next message

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 ADDRESS REMOVED = >
wrote:

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >, "Patrick H.
> Lauke" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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
>