屏幕阅读器没有正确读取价格("$ 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美元的价格获得"1美元兑换2美元" .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,类等更改选择器.