Upload button

It is common to give input elements labels. In HTML you can do this by using for and id. With input type="file" something special happens. The operating system is called and the input will be shown as a button with text depending on the browser, the operating system (?) and the language (of the browser). It gives the user an opportunity to select a file and upload the selected file via the browser. But what happens with the name in the button when you use a screenreader? None of my tests announces the visible name on the button.

Question

What do you think? Does SC 3.5.2 (Label in Name) conflicts with SC 1.3.1 (Info and releationships) in case of input type="file" with an associated label?

Test

I have tested this with several browsers and some screenreaders. The text that is shown on the button is not available in any case.



If you experience something else, you can send your comment to Twitter.com/JulezRulez.

WCAG compliant?

This is the code of the above test.


  <label for="test">Upload your image</label>
  <input type="file" name="test" id="test">

This looks great! WCAG has 2 success criteria where label and input are involved, SC 3.3.2 and SC 1.3.1. The input field is labelled and the label is correctly associated with the input field. So this should be WCAG compliant. Since June 2018 there is WCAG 2.1 with Success criterion 3.5.2:


Success Criterion 3.5.2 Label in Name

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.



Testing this Success Criterion on some upload functionallity I discovered that because of the label I did not hear the text on the button via a screen reader. The screenreader says something like "Button Upload an image". Also the accessibility trees in Chrome and Firefox misses the information on the button. So my question is:
What do you think? Does SC 3.5.2 conflicts with SC 1.3.1 in this case?


Browser Button text (English) Button name Text shown next to button (English)
Chrome Choose File derived from associated button No file chosen
Safari Choose File derived from associated button no file selected
Firefox Browse... derived from associated button No file selected
Opera Choose File derived from associated button No file chosen
Edge Browse... derived from associated button None, input field in front of button
Internet Explorer Browse... derived from associated button None, input field in front of button

Drag and drop zone

Upload functionality with drag and drop is used more often.

Example of drag and drop
  • Should the drag and drop zone "invisible" for keyboard users?
  • Beware that keyboard fucntionality for drag and drop can not be implemented by website developers.
  • Should a screen reader hear when a file is added via drag and drop?