Success Criterion 2.5.3 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.
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 2.5.3 (Label in Name) conflict 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 2.5.3:
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 miss the information on the button. So my question is:
What do you think? Does SC 2.5.3 conflict 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 and more.
- Should you make the drag and drop zone be "invisible" for keyboard users?
- Could you implement keyboard functionality for drag and drop in the browser? (Don't think so)
- Should a screen reader hear when a file is added via drag and drop?
