屏幕 reader 没有正确读取价格（“$47.49”）

Question

我正在尝试让屏幕 reader (NVDA) 将我的货币价值（美元）47.49 美元读作“47 美元 49 美分”，但屏幕 reader 正在读取我的货币值为 "Dollar 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 说成 "dollar thirty-eight dot fifty seven." 这样不好。

如果你只是将它编码为 .57，它会被读作 "dollar thirty-eight point five seven." 和 seems/is 一样不愉快，这正是 NVDA 用户所期望的。

例如，如果我去亚马逊，我会以 1.29 美元 的价格获得 "dollar one point two nine"。 Target 经历了一场广为人知的无障碍诉讼，聘请了无障碍咨询公司，组建了无障碍团队，并对屏幕 readers 进行了广泛的测试，宣布 $39.99 "dollar thirty-nine point nine nine."

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

但是，如果你坚持认为这一定会发生，你可以使用aria-hidden向NVDA隐藏你不喜欢的值，然后你可以写您想要在它之后的页面中的短语，通过 off-screen CSS technique 将其隐藏在所有其他用户之外，目的就是为了做到这一点。

你的新 HTML:

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

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

aria-hidden="true" 隐藏屏幕 reader 中的  文本，因此屏幕 reader 只会读取  中的内容。

现在 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、类等更改选择器

Answer 2

您可以使用 aria-label 属性。

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

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

屏幕 reader 没有正确读取价格（“$47.49”）

Screen reader is not reading the price ("$47.49") properly

html

accessibility

screen-readers

price