WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Jun 4, 2020 12:37PM

Correct, you shoulod not have to add anything to the <summary> element.
Once you do, you have to toggle the aria-expanded state with
Javascript instead of letting the browser do it.

On 6/4/20, Wing Kuet < <EMAIL REMOVED> > wrote:
> 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.
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.