屏幕阅读器无法正确读取价格（“$47.49”）

Question

我试图让屏幕阅读器 (NVDA) 将我的货币价值（美元）47.49 美元读取为“47 美元 49 美分”，但屏幕阅读器将我的货币价值读取为“4749 美元”。

<div class="perVendorCarDetails">
  <span class="carCurrencySymbol">$</span> 
  <span class="carPriceDollar">38</span>           
  <span class="carPriceDot">.</span> 
  <span class="carPriceCents">57</span>
</div>

Answer 1

您的示例被 NVDA/Firefox 称为“美元三十八点五十七”。这不好。

如果您只是将其编码为

<p>$38.57</p>

，它将被读作“美元三十八点五七”。尽管这看起来/确实令人不快，但这正是 NVDA 用户所期望的。

例如，如果我去亚马逊，我会以 1.29 美元 的价格获得“一分二九”。 Target 经历了一场广为人知的无障碍诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并使用屏幕阅读器进行了广泛的测试，宣布 39.99 美元 为“三十九点九九美元”

因此，您可能想做的最重要的事情是不要在 NVDA 用户想要花钱时让他们感到困惑。以与他们预期不同的方式呈现美元价值可以做到这一点。

但是，如果您坚持这种情况必须发生，您可以使用

aria-hidden

从 NVDA 隐藏您不喜欢的值，然后您可以将您想要的短语写到其后面的页面中，将其隐藏所有其他用户通过离屏CSS技术旨在做到这一点。

您的新 HTML：

<p aria-hidden="true">
  $38.57
</p>
<span>38 dollars and 57 cents</span>

显然，您需要将美元金额分解为两个变量并分别写入两次。

aria-hidden="true"

对屏幕阅读器隐藏了

<p>

文本，因此屏幕阅读器只会阅读

<span>

中的内容。

现在使用 CSS 对用户隐藏

<span>

的内容：

p[aria-hidden=true] + span {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

您显然需要根据您的元素、ID、类等更改选择器。

Answer 2

您可以使用 aria-label 属性。

<span aria-label="47 dollars and 49 cents">$47.49</span>

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute