屏幕 reader：将屏幕 reader 的附加文本添加到选择框中

Question

如何添加文本 仅适用于屏幕 reader 以便发音

Volvo selected, Saab selected, Mercedes selected, Audi selected

而不是

Volvo, Saab, Mercedes, Audi

分别。添加

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

进入

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

没有帮助。

有什么想法吗？谢谢。

Answer 1

A​​RIA 文本和标签可以解决这个问题并为屏幕提供信息 reader。 例如，以下会将字母 'x' 标记为关闭按钮。

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

上面的例子来自这里：Aria Label Attribute

详细了解其他 ARIA roles, attributes, and techniques。

Answer 2

ARIA 标签是您的解决方案，是的。但是，您不应该以任何方式这样做。
关于什么是 selected 和什么不是的信息由屏幕 reader 本身提供。不仅如此，如果您设计一个多 select 列表框（即具有 multiple 属性），并且您的用户进入框并按下 Shift+F8，he/she 将听到这样的话：

沃尔沃 selected selected 萨博 selected selected

相信我，这真的非常烦人。所以不要理会它并提供一个标准的可访问（多select，如果需要）列表框。