屏幕阅读器没有正确读取价格(“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说你的例子是“美元38点57”。这真是不太好。

如果你把它编码成<p>$38.57</p>，它就会被读为“美元三十八点五七”。尽管这看起来/是令人不快的，但这正是NVDA用户所期望的。

例如，如果我去亚马逊( Amazon )，我只需花1.29美元就能得到“美元一点二九”。塔吉特通过了一场广受关注的无障碍诉讼，聘请了一家无障碍咨询公司，组建了一个无障碍团队，并对屏幕阅读器进行了广泛的测试，宣布售价39.99美元，名为“$399-9”。

因此，你可能想做的最重要的事情是，而不是，当他们想花钱的时候，他们会迷惑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-标签属性。

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

属性