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称为＆＃34;三十八点五十七美元。＆＃34;这不好。

如果您只是将其编码为$38.57，那么它将被视为＆＃34;美元三十八点五七。＆＃34;正如看起来那样令人不快，这正是NVDA用户所期望的。

例如，如果我去亚马逊，我会得到一美元一点二九＆＃34; $ 1.29 。 Target经历了一次广泛宣传的无障碍诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并对屏幕阅读器进行了广泛的测试，宣布 $ 39.99 为＆＃34;三十九美元点九九。＆＃34;

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

然而，如果您坚持认为必须发生这种情况，您可以使用aria-hidden隐藏您不喜欢的NVDA值，然后您可以编写您想要的短语进入后面的页面，通过旨在执行此操作的off-screen CSS technique将其隐藏在所有其他用户之外。

您的新HTML：

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

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

aria-hidden="true"隐藏了屏幕阅读器中的文字，因此屏幕阅读器只能阅读中的内容。

现在，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">$47.49</span>

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

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

2 个答案: