屏幕阅读器的可访问性：我的按钮应该有多“说话”？

Question

I'm trying to improve screen reader support on our webapp, but I'm struggling a bit with what the best practice is for our buttons. Our current pattern looks something like this

If I focus on the button, should the screen reader say...

...Choose file, required?

...Upload personal letter: choose file?

...Upload personal letter: choose file. Allowed filetypes: doc, docx. Required?

We're currently going for the more talky version, but our team has limited experience with screen reader users and how they're used, so a push in the right direction would be very helpful. Thank you. :)

Answer 1

There is no real rule. It should be fine as long as indications are clear enough for the user.

In fact, it depends a lot on how you are used to your screen reader, Internet and your device in general:

• Advanced users tend to prefer shorter labels and may be annoyed by longer ones.
• Beginners may not understand if the label is too concise
• Beginners may also be overflowed if the label gives too much extra information, or don't understand if the vocabulary is too technical

Screen readers have many options allowing you to decide what to say and what not to say. For example, Jaws calls that verbosity and there are 3 general levels that are further customizable. Sadly, on the web, you can't determine the selected level, nor adapt the markup knowing that this element is only spoken in advanced or intermediate mode (this can be further highly customized anyway) So the best is probably the middle option: be not too concise, but not too verbose either.

I'm a screen reader user myself; as an advanced user, regarding your propositions; I would say:

The second gives more confidence on what you expect exactly than the first one. If there are several files to upload, for example a cover letter + a CV + a photo, it's very important to have the information, so that there is less risk to mess up, ie upload the photo in the CV field. If there are several fields with the same label that are labelled the same, it's hard to know which is which.

Indicating the allowed file types and other requirements of that kind is very good, but it is probably better placed outside the label. Remember that the entire label is spoken again each time you tab into the field. If there are 5 fields with the same information, or if the form is complicated and you must go back and forth several times, it's annoying to hear many times the same.

So, I would go for a variation on the second one: "upload personal letter, required". And indicate somewhere else in the page technical constraints like file type, size, etc. because it's still a very good idea.

Note that the "required" information can be left out from the label if you put the required and aria-required attributes on the field. It's the recommanded way to indicate that a field is required.

Answer 2

Tl;DR: Keep it concise.

If you want to convey some additional info like allowed file types, sizes, "no viruses please" etc., do not put this on the button itself. Prefer, for example, aria-describedby and make a separate control describing all those things, visually connected to the button (say, to the right of it).
We, I mean screen reader users, often navigate by items and do other weird stuff like invoking list of all buttons on the page (even Narrator nowadays started supporting such things), so if the button label is too long, it would be irritating too shortly.