logo标签列表

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

htmlaccessibilityscreen-readersprice
5
我正在尝试让屏幕阅读器（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>
不要这样做。通常，NVDA用户知道当您正常格式化美元值时，NVDA如何读取它们。只需使用$47.49即可，不要试图强制其阅读美元和美分。无论如何，如果这是一个重大问题并且客户坚持要求，请告诉我，我可以指导您一种技术。 - aardrian
2个回答
10
您的示例被NVDA / Firefox读作“dollar thirty-eight dot fifty seven。”这不好。
如果您将其编码为<p>$38.57</p>，它将被读作“dollar thirty-eight point five seven”。尽管这似乎/是令人不愉快的，但这是NVDA用户期望的方式。
例如，如果我去亚马逊，我会得到“dollar one point two nine”的价格，而对于$1.29。Target公司经历了一场广泛报道的无障碍诉讼，聘请了一个无障碍咨询公司，建立了一个无障碍团队，并进行了大量屏幕阅读器测试，将$39.99宣布为“dollar thirty-nine point nine nine”。
因此，您可能要做的最重要的事情就是不要在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、类等，您需要清楚地更改选择器。

此外，注意没有脚本。 它不是必需的。 - aardrian
0
1
aria-label没有在span上被读取。 - user254694
aria-label只允许在交互元素上使用。请在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接