-
Notifications
You must be signed in to change notification settings - Fork 239
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dragon cannot easily operate the details element #4029
Comments
I happened to test this out today while investigating some other Dragon issues and to my surprise it worked: dragon-details.mp4I'm not quite sure how or why it's working. I've been digging into the Dragon Web Extension source JS and that doesn't have Dragon Home 15.30.200.017, Chrome 130.0.6723.92, Windows 11 Home 23H2 |
@matteason, that's very interesting. Thanks for sharing! Our testing device uses Dragon Professional Individual 15.30.000.006, Chrome 130 and Windows 10 Enterprise. We will hopefully get Dragon 16 soon, so can test with that as well. |
We have decided not to fix this. We thoroughly investigated this. 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. |
I have summarised all the technical details around the details element in this JSbin, including testable code. |
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
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
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
The text was updated successfully, but these errors were encountered: