WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion semantics?

for

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
regions.

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

Regards,
James

Regards,
James


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-----
> From: <EMAIL REMOVED>
> [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> >
> > > >