Details component does not work well with Dragon and VoiceOver

[dav-idc]

This issue is from May 2023 external accessibility audit report.

Usability issue

Issue ID:
DAC_Usability_Detail_Component_01

URLs:
https://signin.account.gov.uk/sign-in-or-create

Screen shots

The details component ‘About GOV.UK One Login’, is not easily accessible for all user groups. The details element is no recognised by verbal commands for users navigating with Dragon Naturally Speaking, and the user is required to use verbal keyboard commands such as ‘press tab’.
For users of screen reading assistive technologies the details component does not convey its state or functionality for users navigating with VoiceOver.

Current code ref(s)

#main-content > div > div > details

<details class="govuk-details" data-module="govuk-details">
    <summary class="govuk-details__summary">
        <span class="govuk-details__summary-text">
            About GOV.UK One Login
        </span>
    </summary>
    <div class="govuk-details__text">
        <p class="govuk-body">GOV.UK One Login is new. At the moment you can only use it to access some government services.</p>
        <p class="govuk-body">It does not work with all government accounts or services yet (for example Government Gateway or Universal Credit).</p>
        <p class="govuk-body">In the future, you’ll be able to use GOV.UK One Login to access all services on GOV.UK.</p>
    </div>
</details>

User comments

Screen reader user

“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”

Voice activation user

“The expandable component does not respond to Dragon commands. I am unable to open the ‘GOV.uk one login’ with the command ‘click button’ or by label by name. This means I will have to use keyboard commands through dragon to be able to expand the component to read the further information available. To do this I will use the command ‘press Tab’ to move my focus onto the component, then the command press enter to activate it. This is extremely frustrating and time consuming to do as there is many components to tab through to active it. I would expect the expandable component to activate when I use the command ‘click about Gov.uk one login’ this make it more accessible and faster to access.”

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.

[domoscargin]

Popping this comment here so it doesn't get lost on the other card:
#3464 (comment)

[querkmachine]

Comment from @davidc-gds on Slack, copied here for posterity:

this one would be real nice to see if we can resolve in some tricky way. If we can figure it out, would be a good bit to contribute and share with other design systems too. If we can’t figure it out, then it’s a good one to include in the ‘usability’ portion of our accessibility statement.

[querkmachine]

The accessibility statement has been updated to include this issue.
alphagov/govuk-design-system#2995

[selfthinker]

This came up again in the accessibility audit of the Design System website as well as the accessibility audit of GOV.UK Frontend components by DAC in July 2024.

The new (but same) issues:

• Dragon cannot easily operate the details element govuk-design-system#4029
• VoiceOver doesn't announce details element's role and states govuk-design-system#4030

This time we investigated if we could fix this in any way and spent more time trying various potential solutions.
The are more technical details around the details element in this JSbin, including testable code.

Here is a summary of the work we've done recently to try to fix these issues.

Details with Dragon

We thoroughly investigated this.
We found only one way to make it work for Dragon and that is to add the role="button" to the <summary> element. But doing that created further problems for some screen readers. Those could all potentially be fixed but to the detriment of needing to polyfill the whole component, which means additional JavaScript for everyone. And it would also mean the way screen readers handle it would be inconsistent.

We asked DAC for their opinion on this, and they agreed that it's not worth doing due to not just current but also future problems with adding ARIA attributes to the component. They also said Dragon users are "not currently adversely impacted" because most Dragon users are used to the Details components not working properly and would therefore automatically use the known workarounds.

Another potential solution is to build our own component. But we don't think that would be a good idea either.
And another idea was to create a browser extension to fix this. We might pursue this in the future.

Details with VoiceOver on iOS

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).