E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

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@fuse.net
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

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Léonie Watson
Sent: Friday, July 22, 2022 3:59 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; Patrick H. Lauke < = EMAIL ADDRESS 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

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
>
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Léonie Watson
> Sent: Friday, July 22, 2022 3:59 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; Patrick H. Lauke
> < = EMAIL ADDRESS 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
>
> > > http://webaim.org/discussion/archives
> >
> > > > >

--
Work hard. Have fun. Make history.

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
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: 20 July 2022 21:54
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Using the Summary attribute in tables
>
> CAUTION: This mail comes from outside the University. Please consider this
> before opening attachments, clicking links, or acting on the content.
>
> Caption maps to a table's accessible name, you can also use aria-label
> (for a screen reader only name) or aria-labelledby (if the table is labeled
> by a heading above it). Tables should have an accessible name, but it's not
> a must.
>
> summary (wen it existed) maps to a table's accessible description. If the
> description text is short (1 or 2 sentences, no lists or links or other
> embedded elements) you can linked to it from the table using
> aria-describedby. The text can be visible to all or visually hidden
> (visible only to a screen reader user).
>
> <div class="sr-only" id="t1Desc">table summary content goes here</div>
> <table aria-describedby="t1Desc"> ...
> </table>
>
> If the description is more complex, e.g. you may have to click a button in
> the description to make the table configuration more accessible, or
> something like that, create a short description for the table that tells
> user where they can find the longer description, something like "navigate
> to the next h3 heading for a full description" and use aria-describedby on
> the table to point to the short description text.
>
> You do this because accessible description text is announced as one
> string, there is no mention of interactive elements, so an accessible
> description must be short, simple, and to the point.
>
>
>
> On 7/20/22, Jeremy Echols < = EMAIL ADDRESS REMOVED = > wrote:
> > I believe I've seen it recommended to use aria-describedby pointing to
> > a separate element that contains your summary text. That way you get
> > the general functionality of a summary element, it's still visible to
> > sighted users, etc.
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Geethavani.Shamanna
> > Sent: Wednesday, July 20, 2022 10:33
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Using the Summary attribute in tables
> >
> > Hi Glen,
> >
> > The Caption attribute is already being used in tables. However, if the
> > table description is a couple of sentences or a paragraph long, where
> > does that go? Was the Summary attribute replaced with another one in
> HTML 5?
> >
> > Thanks.
> > Geetha
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > glen walker
> > Sent: 20 July 2022 18:02
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> > Subject: Re: [WebAIM] Using the Summary attribute in tables
> >
> > CAUTION: This mail comes from outside the University. Please consider
> > this before opening attachments, clicking links, or acting on the
> content.
> >
> > Correct, the summary attribute was deprecated in HTML 5. Instead you
> > should use the <caption> element inside a <table>.
> >
> > Most (all?) screen readers use the caption as the accessible name of
> > the table so that if I navigate using the T shortcut key, the caption
> > will be read.
> >
> >
> >
> > On Wed, Jul 20, 2022 at 10:14 AM Geethavani.Shamanna <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Hello all,
> >>
> >> I recently came across a WAI tutorial on tables recommending the use
> >> of the Summary attribute to include table description. Is the Summary
> >> attribute still in use? If it has been deprecated, what is the best
> >> alternative to add table descriptions?
> >> Adding a description via a heading above or below the table won't be
> >> very useful as it won't be directly associated with the table.
> >>
> >> Many thanks.
> >> Geetha
> >>
> >>
> >> > >> > >> <a
> >> href="
> https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%2Furldefense.com%2Fv3%2F__https%3A%2F%2Feur01.safelinks.protection.outlook.com%2F%3Furl%3Dhttp*3A*2F*2Flist__%3BJSUl!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY3yQSW9L6%24&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=Bx1nhKlSCgWV8YKJwPmouvFlzoMZEtEWKEZczRyxyPw%3D&reserved=0
> ">https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist
> </a>.
> >> webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cd
> >> a
> >> 6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a8e5fd981685%7C0
> >> %
> >> 7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAi
> >> L
> >> CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sda
> >> t
> >> aqBeFDvSMvycW4%2ByNMllMzBb8f%2BTgMuoIfNfPHkxoXY%3D&reserved=0
> >> List archives at
> >> <a
> >> href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F
> >> %2Furldefense.com%2Fv3%2F__https%3A%2F%2Feur01.safelinks.protection.o
> >> &data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a
> >> 66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C63793
> >> 9472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2l
> >> uMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=4i5Zi3M
> >> ph8FJnfgoJJQEBy7PUUFJ0FGbTnSOtE6kV6k%3D&reserved=0
> >> utlook.com/?url=http*3A*2F*2Fwebai__;JSUl!!C5qS4YX3!AhLca3ICYN8bac__O
> >> h
> >> Fv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034ey
> >> Y
> >> 3_Nk0oN9$">https://eur01.safelinks.protection.outlook.com/?url=http%3
> >> A
> >> %2F%2Fwebai</a>
> >> m.org%2Fdiscussion%2Farchives&data%7C01%7Cgeethavani.shamanna%
> >> 4
> >> 0open.ac.uk%7Cda6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3
> >> a
> >> 8e5fd981685%7C0%7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJW
> >> I
> >> joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%
> >> 7
> >> C%7C%7C&sdata=%2FzAxg7UgxfMZcZRlYh3vEbpEQkW0Q8bhKBF7B4eQn8w%3D&am
> >> p
> >> ;reserved=0 > >>
> > > > > > href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%
> > 2Furldefense.com%2Fv3%2F__https%3A%2F%2Feur01.safelinks.protection.out
> > look.com%2F%3Furl%3Dhttp*3A*2F*2Flist.webaim.org*2F%26amp%3Bdata%3D05*
> > 7C01*7Cgeethavani.shamanna*40open.ac.uk*7Cda6cb859a1b24d34e3f708da6a71
> > a4a6*7C0e2ed45596af4100bed3a8e5fd981685*7C0*7C0*7C637939333571093154*7
> > CUnknown*7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1
> > haWwiLCJXVCI6Mn0*3D*7C3000*7C*7C*7C%26amp%3Bsdata%3D71BeFDvSMvycW4*2By
> > NMllMzBb8f*2BTgMuoIfNfPHkxoXY*3D%26amp%3Breserved%3D0__%3BJSUlJSUlJSUl
> > JSUlJSUlJSUlJSUlJQ!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0
> > GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY31aHvvbE%24&data
> > %7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a9
> > 1f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%
> > 7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik
> > 1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=QJ1oTuh%2BHeLaaaAFOTQ8S
> > pCnGVghCytOw3RuvjA%2BbgY%3D&reserved=0">https://eur01.safelinks.pr
> > otection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%
> > 7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91
> > f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7
> > CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1
> > haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=4mQqb%2Bi1GT4%2FuzsaWFef
> > 23v9qdmKdk6NBAf1ZRH4nJo%3D&reserved=0</a>
> > List archives at <a
> > href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%
> > 2Furldefense.com%2Fv3%2F__https%3A%2F%2Feur01.safelinks.protection.out
> > look.com%2F%3Furl%3Dhttp*3A*2F*2Fwebaim.org*2Fdiscussion*2Farchives%26
> > amp%3Bdata%3D05*7C01*7Cgeethavani.shamanna*40open.ac.uk*7Cda6cb859a1b2
> > 4d34e3f708da6a71a4a6*7C0e2ed45596af4100bed3a8e5fd981685*7C0*7C0*7C6379
> > 39333571093154*7CUnknown*7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2l
> > uMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0*3D*7C3000*7C*7C*7C%26amp%3Bsdata%3D*2
> > FzAxg7UgxfMZcZRlYh3vEbpEQkW0Q8bhKBF7B4eQn8w*3D%26amp%3Breserved%3D0__%
> > 3BJSUlJSUlJSUlJSUlJSUlJSUlJSUlJQ!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopL
> > g4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY3wV2rPZd%
> > 24&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34
> > a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C63793
> > 9472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2lu
> > MzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=3Q8VY3qXT
> > 1gWfJbdy4Jv9VBhuL%2B5jDzDLLrs0dhpAzI%3D&reserved=0">https://eur01.
> > safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscus
> > sion%2Farchives&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C
> > 800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C
> > 0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDA
> > iLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sd
> > ata=dZN82Z0Z2De%2BdPzXyL7zmV6V3VKnfYtSnD1H%2BbLrRI0%3D&reserved=0<
> > /a> > > > > > > href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%
> > 2Furldefense.com%2Fv3%2F__http%3A%2F%2Flist.webaim.org%2F__%3B!!C5qS4Y
> > X3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3S
> > Dp3fAMBvJgGLxhf034eyY39pjELwI%24&data%7C01%7Cgeethavani.shamann
> > a%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100be
> > d3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8ey
> > JWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C300
> > 0%7C%7C%7C&sdataUdCv7z6OordVNQk1Q1PaCopXqyOSw2SnCI8GxIe5I8%3D&am
> > p;reserved=0">https://eur01.safelinks.protection.outlook.com/?url=http
> > %3A%2F%2Flist.webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40o
> > pen.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e
> > 5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjo
> > iMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%
> > 7C%7C&sdata=4mQqb%2Bi1GT4%2FuzsaWFef23v9qdmKdk6NBAf1ZRH4nJo%3D&amp
> > ;reserved=0</a>
> > List archives at <a
> > href="https://eur01.safelinks.protection.outlook.com/?url=https%3A%2F%
> > 2Furldefense.com%2Fv3%2F__http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchi
> > ves__%3B!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2
> > WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY34BDiqu4%24&data%7C01%7Cge
> > ethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e
> > 2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%
> > 7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJX
> > VCI6Mn0%3D%7C3000%7C%7C%7C&sdata=fjpQ2bO94r1KnuBSD1gpjMjk7puq4LiOm
> > JwmFZe7ek4%3D&reserved=0">https://eur01.safelinks.protection.outlo
> > ok.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data=0
> > 5%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a
> > 91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277
> > %7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6I
> > k1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=dZN82Z0Z2De%2BdPzXyL7z
> > mV6V3VKnfYtSnD1H%2BbLrRI0%3D&reserved=0</a>
> > > > > > > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> > webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C80
> > 0872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%
> > 7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL
> > CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdat
> > a=4mQqb%2Bi1GT4%2FuzsaWFef23v9qdmKdk6NBAf1ZRH4nJo%3D&reserved=0
> > List archives at
> > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> > m.org%2Fdiscussion%2Farchives&data%7C01%7Cgeethavani.shamanna%4
> > 0open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a
> > 8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWI
> > joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
> > C%7C%7C&sdata=dZN82Z0Z2De%2BdPzXyL7zmV6V3VKnfYtSnD1H%2BbLrRI0%3D&a
> > mp;reserved=0 > >
>
>
> --
> Work hard. Have fun. Make history.
> > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=4mQqb%2Bi1GT4%2FuzsaWFef23v9qdmKdk6NBAf1ZRH4nJo%3D&reserved=0
> List archives at
> https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=dZN82Z0Z2De%2BdPzXyL7zmV6V3VKnfYtSnD1H%2BbLrRI0%3D&reserved=0
> >
>
>
>
> ---------- Forwarded message ----------
> From: "Piscitelli, JoAnn" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 13:23:29 +0000
> Subject: [WebAIM] Aside element inside and aside?
> Hello!
>
> Before I ask this question, I want to say that I am not a CSS person. My
> question is can an aside element sit inside an already existing aside
> element? Please see screenshot:
> [Graphical user interface, text, application Description automatically
> generated]
>
> Or should the nested aside element be a div?
>
> Thank you so much, I look forward to any info!
>
> Jo
>
>
>
> ---------- Forwarded message ----------
> From: < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 13:27:02 -0400
> Subject: Re: [WebAIM] CSS only Tab control using a radio button group -
> Good or Bad idea
> 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 ADDRESS REMOVED = > On Behalf Of
> Léonie Watson
> Sent: Friday, July 22, 2022 3:59 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; Patrick H.
> Lauke < = EMAIL ADDRESS 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
>
> > > at http://webaim.org/discussion/archives
> >
>
>
>
>
> ---------- Forwarded message ----------
> From: "Birkir R. Gunnarsson" < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Cc:
> Bcc:
> Date: Fri, 22 Jul 2022 13:45:20 -0400
> Subject: Re: [WebAIM] CSS only Tab control using a radio button group -
> Good or Bad idea
> 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
> >
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Léonie Watson
> > Sent: Friday, July 22, 2022 3:59 AM
> > To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >; Patrick H.
> Lauke
> > < = EMAIL ADDRESS 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
> >
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
>
> > > > >