Improving the definition of an ARIA Accordion

I think we need to clarify the definition of what defines an accordion, since there is not “accordion” role in ARIA.

Is the definition of an accordion an element with role=button, aria-expanded and aria-controls?

There is no need to identify how many “panels” there are in an accordion or which one you are on?

Jon


From: Birkir Gunnarsson <birkir.gunnarsson@deque.com<mailto:birkir.gunnarsson@deque.com>>
Organization: Deque Systems
Date: Monday, July 18, 2016 at 11:56 AM
To: James Nurthen <james.nurthen@oracle.com<mailto:james.nurthen@oracle.com>>, "public-aria@w3.org<mailto:public-aria@w3.org>" <public-aria@w3.org<mailto:public-aria@w3.org>>
Subject: RE: Live Code for APG: ARIA Accordion design pattern ready for review
Resent-From: <public-aria@w3.org<mailto:public-aria@w3.org>>
Resent-Date: Monday, July 18, 2016 at 11:56 AM

Agreed.
The way I envisioned an accordion is as a set of controls that can be expanded or collapsed at will.
All components can be collapsed or expanded, and changing the expanded state of a component does not affect the expanded state of any other component.
If only one component can be expanded at a time, and expanding a component in a set automatically collapses the previously expanded component, we are using tabs.
I wonder whether tabs can encompass a scenario where all tabs are collapsed initially, but once one has been expanded they act like regular tabs.

From: James Nurthen [mailto:james.nurthen@oracle.com]
Sent: Monday, July 18, 2016 12:42 PM
To: public-aria@w3.org<mailto:public-aria@w3.org>
Subject: Re: Live Code for APG: ARIA Accordion design pattern ready for review


Matt,

We have different types of accordions. Sometimes it is allowable to collapse all the panes, sometimes you can expand as many as you like, and sometimes there is one and only one expanded at any time. In this last case expanding one pane collapses all the others. We need to support all of these models.

Regards,

James

On 7/18/2016 9:36 AM, Matt King wrote:

Thank you Bryan!



One thing I don't understand is why it is not possible to collapse the

expanded section.  Why can't all of them be collapsed?



I had also previously thought that one of the differences between tabs and

accordians is that accordians often allow multiple sections to be expanded.



Matt



-----Original Message-----

From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com]

Sent: Sunday, July 17, 2016 11:57 PM

To: Bryan Garaventa <bryan.garaventa@ssbbartgroup.com><mailto:bryan.garaventa@ssbbartgroup.com>; ARIA Working Group

<public-aria@w3.org><mailto:public-aria@w3.org>

Subject: RE: Live Code for APG: ARIA Accordion design pattern ready for

review



Okay, files moved, please try this again...



Live page:

http://whatsock.com/test/w3c/ARIA%20Accordions/demo.htm<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_test_w3c_ARIA-2520Accordions_demo.htm&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=T8satVxNeWY4SySSVj5ezs9KKzw2aMy47q4gaG8SGUE&e=>



Download:

http://whatsock.com/test/w3c/ARIA%20Accordions.zip<https://urldefense.proofpoint.com/v2/url?u=http-3A__whatsock.com_test_w3c_ARIA-2520Accordions.zip&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=mXTe6LKQsyVGB02cFKyTOyZq3QC2MBG2ThiB9v6gaUw&e=>



Bryan Garaventa

Accessibility Fellow

SSB BART Group, Inc.

bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>

415.624.2709 (o)

www.SSBBartGroup.com<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.SSBBartGroup.com&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=Ji4F0sKIvPdKcJzxn0Fx4DjxOX28r98nRMhb4MpCRgg&e=>



-----Original Message-----

From: Bryan Garaventa [mailto:bryan.garaventa@ssbbartgroup.com]

Sent: Sunday, July 17, 2016 6:28 PM

To: ARIA Working Group <public-aria@w3.org><mailto:public-aria@w3.org>

Subject: Live Code for APG: ARIA Accordion design pattern ready for review



Hi,

The code for the accordion wireframe is ready, which can be tested at

http://snoringfoot.dyndns.org/Webserver/ARIA%20Accordions/demo.htm<https://urldefense.proofpoint.com/v2/url?u=http-3A__snoringfoot.dyndns.org_Webserver_ARIA-2520Accordions_demo.htm&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=Uns0gUJwFRDqSDghVg5bIVhid2A_lkJ7Llty1kK5QnI&e=>



At present this is just the coded implementation since my primary objective

was to simply build out what works first, then document it after we finish

any tweaks. For this reason, I'm hosting this temporarily on a test server.



Also, you can download this zip file at

http://snoringfoot.dyndns.org/<https://urldefense.proofpoint.com/v2/url?u=http-3A__snoringfoot.dyndns.org_&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=1XR4jPQgp9GYJGXUa9WV2EdkZ8ikA3-IKs82_PiBgQQ&e=>



Included within this is a vanilla JavaScript helpers lib I've cobbled

together over some years now, which should aid in the process for building

out these widgets in the future. This is included within the file

"helpers.js'.



The design pattern uses the new model for Accordions, which is the use of

individually focusable toggles in combination with aria-expanded to convey

the active state of each toggle.



The setup for this type of implementation is automatically scalable, meaning

that it can include any type of embedded control type within the dynamically

expandable sections, including other complex ARIA widget controls, or even

embedded accordion controls to nest functionality. This is why the named

regions are important for intuitive grouping.



This too works on mobile touch screen devices, and within setup.js,

redundant event handling shows how the same script can be applied to

non-native triggering elements such as Div or Span elements in place of

native links or buttons for use as accordion toggles.



Within this demo, the styling and content are just what I've thrown

together, but all can be changed however you like. It probably needs some

positioning work for the accordion section content for instance. The

triggering elements are presently A tags, but these can be changed to native

buttons, or even simulated elements like Div or Span with tabindex='0' and

role='button', and the scripting will still work accessibly.



Also, please feel free to use the helpers.js file for whatever you wish as

well, it may make this process go faster.



All the best,

Bryan









Bryan Garaventa

Accessibility Fellow

SSB BART Group, Inc.

bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>

415.624.2709 (o)

www.SSBBartGroup.com<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.SSBBartGroup.com&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=Ji4F0sKIvPdKcJzxn0Fx4DjxOX28r98nRMhb4MpCRgg&e=>











--
Regards, James

[Oracle]<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.oracle.com&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=oUUyWo-3XT4yCMQb625UiUtb3xtmRGu72FKQ-LSo5EI&e=>
James Nurthen | Principal Engineer, Accessibility
Phone: +1 650 506 6781<tel:+1%20650%20506%206781> | Mobile: +1 415 987 1918<tel:+1%20415%20987%201918> | Video: james.nurthen@oracle.com<sip:james.nurthen@oracle.com>
Oracle Corporate Architecture
500 Oracle Parkway | Redwood Cty, CA 94065
[Green              Oracle]<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.oracle.com_commitment&d=CwMFAg&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=iNfskakisDyWOzWrbPcsqVbPgHS6pAZt0cuL8yV5rpY&s=fFVGarBtCqA3z6R3zDOOgAbQfqyPe4mhncxT-QZn6EE&e=>Oracle is committed to developing practices and products that help protect the environment