WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA roles and multiple descendants

for

From: glen walker
Date: May 12, 2020 1:51PM

To expand on what Jonathan said, a heading is not typically thought of as
an interactive thing so one would not think that a heading is expandable.

Ideally, you should have a heading that contains a button and the button
would have aria-expanded. That would also allow the keyboard user to
navigate to the button and expand it. Your current example is not
accessible from the keyboard since headings are not natively focusable.

After selecting the button and toggling the aria-expanded value, then your
content can be unhidden.

You may want to look at the Accordion design pattern -
https://www.w3.org/TR/wai-aria-practices/#accordion


On Tue, May 12, 2020 at 7:58 AM Nolan Darilek < <EMAIL REMOVED> >
wrote:

> Got it. In this case, the header itself expands the content when
> clicked. I just need to figure out how to get my screen reader reporting
> the correct state for this HTML, in a way that doesn't visually modify
> the content.
>
>
> Thanks.
>
> On 5/12/20 8:56 AM, Jonathan Avila wrote:
> > Hi, aria-expanded should be on the control that expands the content and
> not the expanded content itself. The content would ideally be wrapped in a
> region and associated with the control that controls it via aria-controls
> and aria-labelledby.
> >
> > Jonathan
> >
>