WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion semantics?


From: Bryan Garaventa
Date: Jun 19, 2014 8:50AM

Thanks :) Please let me know the bug number when filed, and I'll be happy to second it.

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of James Nurthen
Sent: Wednesday, June 18, 2014 8:29 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accordion semantics?

I agree with Bryan.
I also find the keyboard navigation very confusing for a keyboard-only user.

I've started telling people to code accordions as a bunch of expandable

I'm going to raise an issue against the ARIA 1.1 Authoring Practices to
provide an alternate pattern like this for accordions.



On Wed, Jun 18, 2014 at 7:29 PM, Bryan Garaventa <
<EMAIL REMOVED> > wrote:

> Personally I've never been fond of using ARIA Tab constructs for
> accordions,
> because it's impossible to tell the difference between a tab group and an
> inline accordion, because the feedback is the same for screen reader users.
> E.G if you have a tab group nested in an accordion, how do you know which
> is
> which for instance, which may be important because accordions render
> content
> inline whereas tabs render content after a tablist group.
> Is there something wrong with just keeping it simple?
> E.G
> ARIA Toggles:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Accordions/AR
> IA%20Accordion%20(Internal%20Content)/demo.htm
> Expandable ARIA Links:
> http://whatsock.com/tsg/Coding%20Arena/ARIA%20and%20Non-ARIA%20Accordions/AR
> IA%20Accordion%20(Internal%20Content)/demo2.htm
> -----Original Message-----
> [mailto: <EMAIL REMOVED> ] On Behalf Of Jesse Hausler
> Sent: Wednesday, June 18, 2014 5:32 PM
> To: WebAIM Discussion List
> Subject: [WebAIM] Accordion semantics?
> Thoughts on the best semantic for an accordion component?
> I'm good with the keyboard and ARIA recommendations in the ARIA Authoring
> guide:
> http://www.w3.org/TR/wai-aria-practices/#accordion
> I'm just don't care for the semantics in their only example:
> http://www.oaa-accessibility.org/examplep/accordian1/
> Paired headings and divs as the way to go?
> Thanks,
> Jesse
> > > messages to <EMAIL REMOVED>
> <mailto: <EMAIL REMOVED> >
> > > >