屏幕阅读器：将用于屏幕阅读器的其他文本添加到选择框

Question

How to add a text for screen reader only so that it is pronounced

Volvo selected, Saab selected, Mercedes selected, Audi selected

instead of

Volvo, Saab, Mercedes, Audi

respectively. Adding

<span class="sr-only">selected</span>

into

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

doesn't help.

Any ideas? Thank you.

Answer 1

ARIA text and labels can solve this and provide information for a screen reader. For example the following would label the letter 'x' as being a close button.

<button aria-label="Close" onclick="myDialog.close()">X</button>

The above example comes from here: Aria Label Attribute

Read more about other ARIA roles, attributes, and techniques .

Answer 2

ARIA labels are your solution, yes. However, you shouldn't do this in any way.
the info about what is selected and what is not is provided by screen reader itself. More than that, if you design a multi-select list box (ie, with a multiple attribute), and your user enters the box and presses Shift+F8 , he/she will hear something like this:

Volvo selected selected Saab selected selected

This is really, really annoying, believe me. So just don't bother with it and provide a standard accessible (multi-select, if needed) list box.