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: https://github.com/alphagov/govuk-frontend/issues/3464#issuecomment-1582807104

[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. https://github.com/alphagov/govuk-design-system/pull/2995