WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: ARIA roles and multiple descendants

for

From: Nolan Darilek
Date: May 16, 2020 11:13AM

Oh, that's neat. Thanks, I'll probably switch to that and hope someone
else can fix the styling for me. The accordion option is also sort of
what I want, but I'd hoped to make the entire header row expandable,
which is what I think this does. I'll try it if details/summary isn't
accepted.


Also confirming that this works under latest Orca and Firefox, for
anyone here interested in Linux accessibility.


Thanks again.

On 5/16/20 4:51 AM, Birkir R. Gunnarsson wrote:
> 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
>>>>
>> >> >> >> >>
>