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

问题描述 投票:0回答:2

我试图让屏幕阅读器 (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>
html accessibility screen-readers
2个回答
10
投票

您的示例被 NVDA/Firefox 称为“美元三十八点五十七”。这不好。

如果您只是将其编码为

<p>$38.57</p>
,它将被读作“美元三十八点五七”。尽管这看起来/确实令人不快,但这正是 NVDA 用户所期望的。

例如,如果我去亚马逊,我会以 1.29 美元 的价格获得“一分二九”。 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、类等更改选择器。


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.