WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA roles and multiple descendants

for

From: Birkir R. Gunnarsson
Date: May 16, 2020 3:51AM

You can use <details>/</summary> for this
<details>
<summary>What is an email address?</summary>
<p>Glad you asked.</p>
</details>
The summary element becomes a real button with aria-expanded, the
paragraph with "glad you asked" is the content that is
displayed/hidden when you toggle the button.
Browser handles the displaying or hiding and setting the aria-expanded
attribute to match.


On 5/12/20, glen walker < <EMAIL REMOVED> > wrote:
> 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
>> >
>>
> > > > >


--
Work hard. Have fun. Make history.