如何让屏幕阅读器在宣布文本框的价值之前先宣布美元价值

Question

在我的应用程序中，我有一个文本输入来获取金额值。然而，美元符号是作为图像给出的。因此，文本框中不会出现美元。现在，当用户点击此文本框时，如何让屏幕阅读器读出该值的 $ 前缀？

Answer 1

一个简单的解决方案是使用包装技术为输入提供可访问的名称，以及图像的

alt

。

这样，$ 将包含在输入的标签中。

<label>Amount
    <input type="number"> <img src="…" alt="$">
</label>

如果您无法使用包装技术，您可以引用这两个元素来提供可访问的名称。

仍然建议使用

for

，这样浏览器可以在单击标签时聚焦输入。

<label for="amount" id="amount-label">Amount</label>
<input type="number" id="amount" aria-labelledby="amount-label amount-dollar">
<img src="…" alt="$" id="amount-dollar">

Answer 2

要使屏幕阅读器在文本框值之前宣布美元值，您可以在 HTML 输入元素中使用 aria-label 属性。 aria-label 属性允许您指定屏幕阅读器要读取的字符串，该字符串可以与屏幕上直观显示的文本不同。由于您的美元符号显示为图像并且不包含在文本框中，因此您可以将美元符号添加到文本框的 aria-label 描述中。

金额：