屏幕阅读器没有正确读取价格（“47.49美元”） [英] Screen reader is not reading the price ("$47.49") properly

问题描述

我试图让屏幕阅读器（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 / Firefox会将您的示例称为dollar三十八点五十七。这是不好的。

如果您将它编码为< p> $ 38.57< / p> 将被读作美元三十八点五七。 NVDA用户期望的是令人不愉快的。

例如，如果我去亚马逊，我会得到美元一点二九 EM> $ 1.29 的。目标公司通过一项广为宣传的可访问性诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并使用屏幕阅读器进行了大量测试，并宣布39.99美元为美元三十九点九九。

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

然而，如果您坚持认为这种情况发生，您可以使用 aria-hidden 可以隐藏您不喜欢的NVDA的值，然后您可以将所需的短语写入页面之后，并通过其他用户隐藏离屏CSS技术旨在做到这一点。

您的新HTML：

 < p aria-hidden =true> 
 $ 38.57 
< / p> 
< span> 38美元和57美分< / span> 
  

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

$ b

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，类来更改选择器等等。

I am trying to make the screen reader (NVDA) to read my currency value (US dollar) $47.49 as "47 Dollars 49 Cents", but the screen reader is reading my currency value as "Dollar 4749".

<div class="perVendorCarDetails">
  <span class="carCurrencySymbol">$</span> 
  <span class="carPriceDollar">38</span>           
  <span class="carPriceDot">.</span> 
  <span class="carPriceCents">57</span>
</div>

解决方案

Your example is spoken by NVDA/Firefox as "dollar thirty-eight dot fifty seven." This is not good.

If you just coded it as <p>$38.57</p> it would be read as "dollar thirty-eight point five seven." As unpleasant as that seems/is, it is what NVDA users expect.

If I go to Amazon, for example, I get "dollar one point two nine" for $1.29. Target, which went through a pretty widely-publicized accessibility lawsuit, hired an accessibility consulting firm, built an accessibility team, and performed extensive testing with screen readers, announces $39.99 as "dollar thirty-nine point nine nine."

So the most important thing you may want to do is not confuse NVDA users when they want to spend money. Presenting dollar values in a different way than they expect can do that.

However, if you are adamant that this must happen, you can use aria-hidden to hide the value you do not like from NVDA, and then you can write the phrase that you want into the page after it, hiding it from all other users via an off-screen CSS technique intended to do just this.

Your new HTML:

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

Obviously you will need to break the dollar amount into two variables and write each twice.

The aria-hidden="true" hides the <p> text from screen readers, so a screen reader will only read what is in the <span>.

Now the CSS to hide the contents of the <span> from your users:

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;
}

You will clearly need to change the selector based on your elements, IDs, classes, etc.

这篇关于屏幕阅读器没有正确读取价格（“47.49美元”）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！