WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: conveying expand/collapse state with details/summary elements

for

From: Wing Kuet
Date: Jun 4, 2020 11:49AM

Thanks that really helpful. In my case it looks the client has added the aria-expanded and the role=button attribute which is preventing the state of the button from being announced using VoiceOver. I do not know if that is the exact reason but from observation that is what I can see. In Graham's response the example he provided currently announces the expand and collapse state as there is no role="button" attribute or the aria-expanded attribute.

Regards,

Wing Kuet
Accessibility Consultant & Software Tester
Test Partners Ltd
020 8102 9500 (switchboard)
020 8102 9507 (direct)
<EMAIL REMOVED>
www.testpartners.co.uk

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Birkir R. Gunnarsson
Sent: 04 June 2020 15:52
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] conveying expand/collapse state with details/summary elements

I recently looked at the same with the same result.
IE11 almost works.
It works at first, the button is collapsed, you can't see the content.
It also works when you click the button, it changes to "expanded" and content is revealed.
But it fails after that.
Clicking the button to collapse it changes the state of the button to "collapsed" but the content is still visible to Jaws.
Ditto any action you take after.
Works perfectly in Chrome and Firefox with Jaws/NVDA.

The idea is awesome, creating a dynamic expand/collapse widget without Javascript.
Is't as simple as this:

<details>
<summary>Terms and conditions</summary>
the terms and conditions crap
</details>

The <summary> element should automatically map to role="button" with an aria-expanded state, the state is dynamically updated by the browser when you activate the button.


While I can see why some browsers/screen readers would map the <details> element as a group automatically, I disagree with that implementation.
Authors should decide if there is a group element (<fieldset> or a
landmark) and where to apply it.
For me the grouping should be applied to the content that is displayed, not to the details element (that also includes the button).

e.g.
<details>
<summary>Indicate your work preferences</summary>
<!-- grouping -->
<fieldset>
<legend>My work preferenses</legend>

radiobuttons go here.

</fieldset>
</details>
You can also use a <navigation> element with an aria-label inside the details to create an accordion navigation menu <details> <summary id="acOp">Account options</summary> <nav aria-labelledby="acOt"> <ul> <li><button>Edit account</button></li> <li><button>Delete account</button> </ul> </nav> </details> (these should technically be links I guess, I'm just too lazy to type href).
If Voiceover automatically maps <details> as a group we should file a defect.


Cheers
-B

On 6/4/20, Graham Armfield < <EMAIL REMOVED> > wrote:
> Hello Wing,
>
> I think that either there is a problem with that particular version of
> iOS, or maybe it's the added role attributes that mess things up.
>
> I've just tested an example page (
> http://examples.hassellinclusion.com/accordion/details-01.html) with
> an iPhone running iOS 13.3. The page contains two simple examples of
> [summary] and [details] constructs but there are no roles or other
> aria attributes present. On this page I'm finding that Voiceover
> *does* announce whether the element is expanded or collapsed.
>
> Perhaps you could try the examples on that page to see if they work
> for you.
>
> That test page was created to accompany a blog post I wrote last year
> on [summary] and [details] -
> https://www.hassellinclusion.com/blog/accessible-accordions-part-2-usi
> ng-details-summary/ . Apart from IE11 and an issue with Firefox/NVDA
> which has been fixed now (a Firefox bug) I found that support was
> fairly good across browsers and screen readers.
>
>
> Regards
> Graham Armfield
>
> coolfields.co.uk <http://www.coolfields.co.uk/>; @coolfields
> <https://twitter.com/coolfields>
>
>
> On Thu, 4 Jun 2020 at 12:15, Wing Kuet < <EMAIL REMOVED> >
> wrote:
>
>> Does anyone have a view on conveying the expand/collapse state with
>> details/summary elements? I am testing a webpage built by one of our
>> clients and I am using VoiceOver with Safari on iOS 12.1.4. The
>> details element has a role of 'group' and the summary element has a
>> role of 'button' and an aria-expanded attribute set to 'false' initially.
>> However,
>> the problem is that VoiceOver announces the button but does not
>> convey the state.
>>
>> Does anyone know of if the expand/collapse state can be conveyed with
>> details/summary elements using Safari?
>>
>>
>> Regards,
>>
>> Wing Kuet
>> Accessibility Consultant & Software Tester Test Partners Ltd
>> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>>
>> Regards,
>>
>> Wing Kuet
>> Accessibility Consultant & Software Tester Test Partners Ltd
>> 020 8102 9500 (switchboard)
>> 020 8102 9507 (direct)
>> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>> www.testpartners.co.uk<;http://www.testpartners.co.uk>;
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.