4

我正在尝试让屏幕阅读器 (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>
4

2 回答 2

8

NVDA/Firefox 将您的示例称为“38 点 57 美元”。情况不妙。

如果您只是<p>$38.57</p>将其编码为“美元三十八点五七”。尽管这看起来/确实令人不快，但这是 NVDA 用户所期望的。

例如，如果我去亚马逊，我会以1.29美元的价格买到“1 点 2 9 美元” 。Target 经历了一场广为人知的无障碍诉讼，聘请了一家无障碍咨询公司，建立了无障碍团队，并对屏幕阅读器进行了广泛的测试，宣布39.99美元为“39 点九九美元”。

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

但是，如果您坚持这必须发生，您可以使用aria-hidden从 NVDA 中隐藏您不喜欢的值，然后您可以在其后的页面中写入您想要的短语，通过关闭对所有其他用户隐藏它-screen 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、类等更改选择器。

于 2016-06-16T02:50:11.907 回答
1

您可以使用 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

于 2021-02-11T13:39:01.963 回答