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
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Birkir R. Gunnarsson
> Sent: 20 July 2022 21:54
> To: WebAIM Discussion List < <EMAIL 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 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 REMOVED> > On Behalf Of
> > Geethavani.Shamanna
> > Sent: Wednesday, July 20, 2022 10:33
> > To: WebAIM Discussion List < <EMAIL 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 REMOVED> > On Behalf Of
> > glen walker
> > Sent: 20 July 2022 18:02
> > To: WebAIM Discussion List < <EMAIL 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 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&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=Bx1nhKlSCgWV8YKJwPmouvFlzoMZEtEWKEZczRyxyPw%3D&amp;reserved=0
> ">https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist
> </a>.
> >> webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cd
> >> a
> >> 6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a8e5fd981685%7C0
> >> %
> >> 7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAi
> >> L
> >> CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sda
> >> t
> >> aqBeFDvSMvycW4%2ByNMllMzBb8f%2BTgMuoIfNfPHkxoXY%3D&amp;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
> >> &amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a
> >> 66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C63793
> >> 9472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2l
> >> uMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=4i5Zi3M
> >> ph8FJnfgoJJQEBy7PUUFJ0FGbTnSOtE6kV6k%3D&amp;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&amp;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&amp;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&amp;data
> > %7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a9
> > 1f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%
> > 7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik
> > 1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=QJ1oTuh%2BHeLaaaAFOTQ8S
> > pCnGVghCytOw3RuvjA%2BbgY%3D&amp;reserved=0">https://eur01.safelinks.pr
> > otection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&amp;data%
> > 7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91
> > f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7
> > CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1
> > haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=4mQqb%2Bi1GT4%2FuzsaWFef
> > 23v9qdmKdk6NBAf1ZRH4nJo%3D&amp;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&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34
> > a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C63793
> > 9472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2lu
> > MzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=3Q8VY3qXT
> > 1gWfJbdy4Jv9VBhuL%2B5jDzDLLrs0dhpAzI%3D&amp;reserved=0">https://eur01.
> > safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscus
> > sion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C
> > 800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C
> > 0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDA
> > iLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sd
> > ata=dZN82Z0Z2De%2BdPzXyL7zmV6V3VKnfYtSnD1H%2BbLrRI0%3D&amp;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&amp;data%7C01%7Cgeethavani.shamann
> > a%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100be
> > d3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8ey
> > JWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C300
> > 0%7C%7C%7C&amp;sdataUdCv7z6OordVNQk1Q1PaCopXqyOSw2SnCI8GxIe5I8%3D&am
> > p;reserved=0">https://eur01.safelinks.protection.outlook.com/?url=http
> > %3A%2F%2Flist.webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40o
> > pen.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e
> > 5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjo
> > iMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%
> > 7C%7C&amp;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&amp;data%7C01%7Cge
> > ethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e
> > 2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%
> > 7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJX
> > VCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=fjpQ2bO94r1KnuBSD1gpjMjk7puq4LiOm
> > JwmFZe7ek4%3D&amp;reserved=0">https://eur01.safelinks.protection.outlo
> > ok.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&amp;data=0
> > 5%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a
> > 91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277
> > %7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6I
> > k1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=dZN82Z0Z2De%2BdPzXyL7z
> > mV6V3VKnfYtSnD1H%2BbLrRI0%3D&amp;reserved=0</a>
> > > > > > > > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.
> > webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C80
> > 0872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%
> > 7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL
> > CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdat
> > a=4mQqb%2Bi1GT4%2FuzsaWFef23v9qdmKdk6NBAf1ZRH4nJo%3D&amp;reserved=0
> > List archives at
> > https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebai
> > m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%4
> > 0open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a
> > 8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWI
> > joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
> > C%7C%7C&amp;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&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=4mQqb%2Bi1GT4%2FuzsaWFef23v9qdmKdk6NBAf1ZRH4nJo%3D&amp;reserved=0
> List archives at
> https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7C800872efdee34a66a55708da6a91f535%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939472358544277%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=dZN82Z0Z2De%2BdPzXyL7zmV6V3VKnfYtSnD1H%2BbLrRI0%3D&amp;reserved=0
> >
>
>
>
> ---------- Forwarded message ----------
> From: "Piscitelli, JoAnn" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 REMOVED> >
> To: "'WebAIM Discussion List'" < <EMAIL 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 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
>
> > > at http://webaim.org/discussion/archives
> >
>
>
>
>
> ---------- Forwarded message ----------
> From: "Birkir R. Gunnarsson" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL 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 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
> > < <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
> >
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
>
> > > > >