E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

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

Number of posts in this thread: 5 (In chronological order)

From: Wing Kuet
Date: Thu, Jun 04 2020 5:15AM
Subject: conveying expand/collapse state with details/summary elements
No previous message | Next message →

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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

Regards,

Wing Kuet
Accessibility Consultant & Software Tester
Test Partners Ltd
020 8102 9500 (switchboard)
020 8102 9507 (direct)
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.testpartners.co.uk<;http://www.testpartners.co.uk>;

From: Graham Armfield
Date: Thu, Jun 04 2020 7:17AM
Subject: Re: conveying expand/collapse state with details/summary elements
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> Regards,
>
> Wing Kuet
> Accessibility Consultant & Software Tester
> Test Partners Ltd
> 020 8102 9500 (switchboard)
> 020 8102 9507 (direct)
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> www.testpartners.co.uk<;http://www.testpartners.co.uk>;
>
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Jun 04 2020 8:51AM
Subject: Re: conveying expand/collapse state with details/summary elements
← Previous message | Next message →

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>

<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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>
>> Regards,
>>
>> Wing Kuet
>> Accessibility Consultant & Software Tester
>> Test Partners Ltd
>> 020 8102 9500 (switchboard)
>> 020 8102 9507 (direct)
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.testpartners.co.uk<;http://www.testpartners.co.uk>;
>>
>> >> >> >> >>
> > > > >

--
Work hard. Have fun. Make history.

From: Wing Kuet
Date: Thu, Jun 04 2020 11:49AM
Subject: Re: conveying expand/collapse state with details/summary elements
← Previous message | Next message →

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 ADDRESS REMOVED =
www.testpartners.co.uk

From: Birkir R. Gunnarsson
Date: Thu, Jun 04 2020 12:37PM
Subject: Re: conveying expand/collapse state with details/summary elements
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED =
> www.testpartners.co.uk
>
>