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 8:51AM

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-using-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>;
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.