Upload file component doesn't respond to 'click choose file' due to Dragon / browser bugs

[CharlotteDowns]

This issue is from May 2023 external accessibility audit report.

Usability issue

Issue ID:
DAC_Usability_Upload_File_02

URLs:
https://govuk-frontend-pr-3503.herokuapp.com/full-page-examples/upload-your-photo-success

Screen shots

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.

Current code ref(s)

#photo

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

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>

[querkmachine]

This is a known issue with Dragon NaturallySpeaking that we have previously reported. In that case, Nuance's support was insistent that they would not fix the issue.

alphagov/reported-bugs#35

[querkmachine]

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

feels again like an update to the file upload backlog item, and maybe the accessibility statement’s “usability” portion.

[querkmachine]

Looking at this old issue, it seems that Dragon can sort of be coerced into working with file inputs if you use a label with role="link" on it.

This doesn't really fix the problem unless we make the input label read something like "Choose file". It apparently doesn't work unless the user states the entire label name (only saying part of the label does not work (although it does for other labels), it doesn't even work consistently anyway, and there's the fundamental weirdness of identifying something as a link when it isn't.

[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 GOV.UK Frontend components by DAC in July 2024.
The new (but same) issue: alphagov/govuk-design-system#4031

This time we investigated if we could fix this in any way and spent more time trying various potential solutions.
Here is a summary of the work we've done recently to try to fix this issue.

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.