Dragon cannot easily operate the details element

[selfthinker]

This issue is from the accessibility audit of the Design System website as well as the accessibility audit of GOV.UK Frontend components by DAC in July 2024.

DAC's description

• Page: Type scale and Details
• WCAG reference: none (usabililty)
• Issue ID: DAC_Details_Component_Usability_01 (website) and DAC_Usability_Detail_Component_01 (Frontend)

The ‘View the old type scale’ details component could not be accessed with Dragon using the expected voice commands. This put voice activation users at a disadvantage of as they cannot access the component using the expected voice commands. The use of the <details> and <summary> components contain some browser and assistive technology issues which means that it is not well supported. Voice activation users were still able to access the component using advanced voice commands, but this is not expected behaviour.

Voice Activation user comments

“I am unable to interact with ‘View the old type scale’ element using standard Dragon commands. I tried the direct Dragon Command using its visual title ‘click view the old type scale’ but this did not work. I then tried using the ‘click link’, ‘click button’, and ‘click list’ commands which gives Dragon tags to all possible links, buttons, and lists Dragon can identify on-screen respectively.
Unfortunately, no Dragon tags appeared on the element. This showed that Dragon could not identify this element as something that could be interacted with. The only way I was able to open the element was to use Dragon to navigate via keyboard control commands: ‘press Tab’ and the ‘press Enter’, which replicates the effects of pressing the Tab and the Enter keyboard buttons respectively.
This required lots more commands to open the element, making the process much longer and far more tedious. I had expected the element to be interactable via Dragon command based off the visual title ‘click view the old type scale’. This would allow me to open the element and view its contents in a consistent, quick, and easy manner.”

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

DAC's proposed solution

We suggest following the current implementation of the GOV.UK Design System accordion component to replicate the behaviour of the details component.
The style of the component can remain the same, however by following the accordion component it will be implemented as a standard HTML button which can be accessed as expected by voice activation users using the expected voice commands.
Another suggestion would be to have the information readily available on the page, instead of it being contained within an expandable section.

Other potential solutions

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

We don't agree that changing the implementation to imitate the accordion component is the best solution.
We need to discuss how to fix this in a better way.
We might need to change the guidance to refer to the known issues.
Another option is to lobby for making Nuance fix the bug in Dragon.

Related issues

• Details component does not work well with Dragon and VoiceOver govuk-frontend#3693
• Details (Hidden text) govuk-design-system-backlog#44

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