Re: Single Region Show/Hide Control

Thomas,

One potential issue with your example is that you are also changing the accessible name of the button.
The changing of the accessible name was explicitly excluded from the ARIA mute button example, since the “aria-pressed” is used to indicate the “state” of mute.  In other examples, like Freeview, that use "aria-expanded” they do not call for changing the accessible name.

Mute Button Example:
http://w3c.github.io/aria-practices/examples/button/button.html


Treeview Example:
http://w3c.github.io/aria-practices/examples/treeview/treeview-1/treeview-1a.html


I will ask the ARIA authoring practices group about this in the next meet on January 8th.

Jon



From: Thomas Logan <thomas@equalentry.com<mailto:thomas@equalentry.com>>
Date: Friday, December 30, 2016 at 3:45 PM
To: "public-aria@w3.org<mailto:public-aria@w3.org>" <public-aria@w3.org<mailto:public-aria@w3.org>>
Subject: Single Region Show/Hide Control
Resent-From: <public-aria@w3.org<mailto:public-aria@w3.org>>
Resent-Date: Sunday, January 1, 2017 at 10:51 AM

Hello,

I am currently working with a company that is building a new set of user interface elements. One scenario that they are building is a single show/hide control to be used to display additional buttons that can be used to control the UI.

From reviewing the https://www.w3.org/TR/wai-aria-practices-1.1/ <https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=-Eh5yZWUo2Vo8Rv4TrAwSyEK_KojwbdFPCo6iBRmcYs&e=>  there was some confusion because the primary mention of show/hide functionality is in the accordion<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23accordion&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=GrwQ9uCbYwivTKnYqUIm0Jry6lHgw4v5-X9wT21vAZ0&e=> section. Because this UI pattern is only a single collapsible/expandable container it does not meet the criteria of being a vertically stacked set of elements for a container.

I checked with Bryan Garaventa and it appears the best implementation would be a "to use a button and aria-expanded, plus a named region that uses aria-labelledby that points back to the toggle." I put a sample implementation on codepen<https://urldefense.proofpoint.com/v2/url?u=http-3A__codepen.io_EqualEntry_pen_jyNEjZ_&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=F2BMayfFP49GXzl4xwwIYS1lZRHDgzD8AQ-qz877cZI&e=> for your review and confirmation.

I would like to request that this UI pattern be included in the WAI-ARIA-Practices 1.1 documentation. It could be an additional piece of information listed in the button<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23button&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=Vsej0V84gfBjuoO8XAXJYWWnKbqv6LDjDKaDNuMNfAk&e=> section. I would suggest the accordion<https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_TR_wai-2Daria-2Dpractices-2D1.1_-23accordion&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=GrwQ9uCbYwivTKnYqUIm0Jry6lHgw4v5-X9wT21vAZ0&e=> section should also indicate that a single expandable collapsible container should follow the show/hide functionality documented in the button section rather than the guidance in the accordion section.

  *

--
Thomas Logan
Owner
Equal Entry<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.equalentry.com&d=DQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=wcwP0-dWsE7S8tdo4w1ozAf7pLAsKZZQZskE2fdHcjk&s=1TMPL9R0TnDgS8PmGmCagQpNAkuZfuAE2ZTHlhW-uTI&e=> - “Contributing to a more accessible world”