屏幕阅读器无法正确读取价格（47.49

提问者：小点点

屏幕阅读器无法正确读取价格（47.49

我试图使屏幕阅读器（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>

共1个答案

匿名用户

您的示例被NVDA/Firefox说成“dollar 38-8dot 57ven”。这可不好。

如果您只是将其编码为，它将被读为“dollar 38-8p.5seven”。虽然这看起来令人不快/但这正是NVDA用户所期望的。

例如，如果我去亚马逊，我以1.29的价格得到“美元一点二点九”。Target公司经历了一场广泛宣传的无障碍性诉讼，聘请了一家无障碍性咨询公司，组建了一个无障碍性团队，并对屏幕阅读器进行了广泛的测试，该公司宣布39.99美元为“399.9美元”。

所以你可能要做的最重要的事情是，当NVDA用户想花钱的时候，不要把他们搞糊涂了。以一种不同于他们预期的方式呈现美元价值就能做到这一点。

但是，如果您坚持必须这样做，您可以使用向NVDA隐藏您不喜欢的值，然后您可以将您想要的短语写到页面后面，通过一种屏幕外CSS技术向所有其他用户隐藏它。

您的新HTML:

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

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

对屏幕阅读器隐藏/code>文本，因此屏幕阅读器将只读取/code>中的内容。

现在要向用户隐藏/code>内容的CSS:

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，类等更改选择器。