Dragon cannot easily activate the file upload button

[selfthinker]

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

DAC's description

• Page: File upload
• WCAG reference: none (usabililty)
• Issue ID: DAC_Usability_Upload_File_02

The ‘choose file’ input does not respond to any verbal command for users of voice activation software. This means that the user must use verbal keyboard commands such as ‘Press tab’ etc, in order to access the component.

Voice activation user comments:

“I am unable to upload a photo with Dragon commands. The ‘choose file’ component does not respond to any Dragon commands. This means I must use keyboard commands with dragon to activate it this will simulate a manual keyboard through voice activation. I will use the command ‘press tab’ to move my focus onto the component. Then the command ‘press enters’ to activate for the file explorer to appear. This is very time consuming and frustrating to be able to access one component.
I would expect the ‘choose file’ button to respond to the command ‘click button’ and label by name. When I use the command ‘click choose file’ I would expect the file explore to automatically appear. This makes it more accessible for me to complete with dragon commands.”

DAC's proposed solution

Consider using the following implementation to enable all users to use the file upload as
expected:

<div>
  <span>
    <input type="file" id="file-upload" style="display: none;">
  </span>
  <label for="file-name">Upload your photo</label>
  <button id="file-upload-button" style="background:green; color:white;">Choose File</button>
  <input type="text" disabled readonly id="file-name" value="No file chosen">
</div>

<script>
  document.getElementById("file-upload-button").addEventListener("click", function(){
    document.getElementById("file-upload").click();
    document.getElementById("file-name").value = document.getElementById("file-upload").value;
  });
</script>

Other potential solutions

This is a known issue with Dragon. This happens with all native HTML <input type="file"> elements, irrespective of implementation.

We need to discuss and explore this further first before deciding on a solution.
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

• Dragon cannot operate file upload button reported-bugs#35
• Upload file component doesn't respond to 'click choose file' due to Dragon / browser bugs govuk-frontend#3686
• File upload govuk-design-system-backlog#49
• File upload component causing confusion for Dragon users govuk-frontend#2425
• Upload file component has no visual target area when dragging and dropping a file govuk-frontend#3685

Additional instances

This is the only instance of the file upload component.

Needed roles

Frontend developer, content designer

[selfthinker]

We investigated this and are confident we can mostly fix this.

We've built a prototype to enhance the file upload component not just to fix this but also to add other useful enhancements. Because that was mostly successful, we plan to build it properly.

Although that generally fixes the issue, we noticed it only works the first time you interact with the component and after that it fails to react. We’ve looked at lots of different implementations across the web, and none of them fixes it consistently for Dragon.

The issue is that Chrome has a security feature which disallows any JavaScript that appears to do potentially malicious actions. Opening the file picker is one of the features gated by user activation. When trying to do that from the second time onwards, there is an error message in the browser console which says:
“File chooser dialog can only be shown with a user activation”

We asked DAC for their opinion on this, and they said that the majority of users wouldn't need to use the file upload more than once, so are not likely to notice that it won't work the second time.
And there is a work around to make it work the second time. When you say 'mouse click' (or any other command that interacts with the page) in between clicking on the file input button, it keeps on working.
I have added some of the solutions with technical details to this JSbin, including testable code.

There is another potential solution to add a role="button" to the <input type=file />. That makes the "click button" command work but not "click choose file". This is very likely to cause more issues with screen readers, though, and is therefore not something we will use.
But we could also create a browser extension to add it for Dragon users.