VoiceOver doesn't announce details element's role and states

[selfthinker]

This issue is from the accessibility audit of GOV.UK Frontend components by DAC in July 2024.

DAC's description

• Page: Details
• WCAG reference: none (usabililty)
• Issue ID: DAC_Usability_Detail_Component_01

For users of screen reading assistive technologies the details component does not convey its state or functionality for users navigating with VoiceOver.

Screen reader comments:

“A details component was present on the page which expanded and collapsed content when selected in relation to an issue with the e-mail. However, with VoiceOver this item did not announce either as a link or as a button and did not advise me of when content was collapsed or expanded.
I was not immediately aware that the item was selectable and would have been unable to identify the component to select when browsing out of context.
Ensuring that the item announces as either a link or as a button and clearly advises me of whether content collapses or expands will prevent any difficulty and will ensure that I can access the content. In my opinion it may be better to use an accordion feature rather than this details component as the accordion works with all screen reader software”

DAC's proposed solution

Consider using a button for the default detail component as this will mean it is recognised by and will convey its correct state to all assistive technologies.

Other potential solutions

This is a known issue with VoiceOver. This happens with all native HTML <details> elements, irrespective of implementation.

We don't know yet what the best solution would be, we need to discuss and explore this further first.
We might need to change the guidance to refer to the known issues.
Another option is to lobby for making Apple fix the bug in VoiceOver.

Related issues

• iOS VoiceOver doesn't always announce correct state of details element reported-bugs#29
• iOS VoiceOver doesn't announce state of details element when using role group reported-bugs#28
• Details component does not work well with Dragon and VoiceOver govuk-frontend#3693
• Details (Hidden text) govuk-design-system-backlog#44
• details component not announcing collapsed/expanded state on iOS with VoiceOver govuk-frontend#988
• iOS VoiceOver doesn't correctly announce expanded state of details element if summary has display: inline-block reported-bugs#64
• Is it worth adding aria expanded to details? govuk-frontend#4972
• Fix details expanded state not announced on iOS govuk-frontend#5089
• 'The details and summary elements, again' blog post by Scott O'Hara

Additional instances

Although the details component is used on multiple pages throughout the website, it is always the same component, so will only need to be fixed once.

Needed roles

Frontend developer, content designer

[querkmachine]

For the sake of clarity, can we check which browsers this was tested in, and also whether it's specific to macOS VoiceOver or is also an issue with iOS VoiceOver?

[selfthinker]

@querkmachine, nearly all of the previous issues specifically mention iOS. But I tested just to double check. I can confirm it is only a problem with VoiceOver on iOS. There is no other real browser on iOS other than Safari. (From what I remember, all the other browsers use Safari's rendering engine.)

[owenatgov]

Closing this via alphagov/govuk-frontend#5310

[selfthinker]

A quick summary of what we have done...

After we investigated this, we found that there was a problem with our specific implementation using inline-block.
That fixed the issue for VoiceOver on iOS versions 17 and 18.

There are multiple VoiceOver bugs involved. While we could fix the issue for versions 17 and 18, we couldn't find a fix for older versions (which was due to a different VoiceOver bug).

I have summarised all the technical details around the details element in this JSbin, including testable code.