WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accordion semantics?

for

From: Detlev Fischer
Date: Jun 19, 2014 1:36AM

I think in cases where activating one of the tabs automatically closes the other tabs as in this Hillen example

http://hanshillen.github.io/jqtest/#goto_accordion

..the semantics are quite close to the horizontal tab panels so the tablist / tab roles seem appropriate. But maybe I am missing something here.

The OpenAjax Alliance example is different in that expanded tabs stay open. For this type of accordion, using expandable regios is certainly more appropriate.

Best, Detlev


--
Detlev Fischer
testkreis c/o feld.wald.wiese
Thedestr. 2, 22767 Hamburg

Mobil +49 (0)1577 170 73 84
Tel +49 (0)40 439 10 68-3
Fax +49 (0)40 439 10 68-5

http://www.testkreis.de
Beratung, Tests und Schulungen für barrierefreie Websites

James Nurthen schrieb am 19.06.2014 05:28:

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