屏幕阅读器未正确读取价格(“$47.49") [英] Screen reader is not reading the price ("$47.49") properly

问题描述

我试图让屏幕阅读器 (NVDA) 将我的货币价值(美元)47.49 美元读取为47 美元 49 美分"，但屏幕阅读器将我的货币价值读取为4749 美元".

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

解决方案

您的示例被 NVDA/Firefox 称为38 美元点 57 美元".这不好.

如果您只是将其编码为 <p>$38.57</p>，它将被解读为三十八点五七分".尽管这看起来令人不快，但这正是 NVDA 用户所期望的.

例如，如果我去亚马逊，我会以 $1.29 获得一分二九".Target 经历了一场广为人知的无障碍诉讼，聘请了一家无障碍咨询公司，建立了一个无障碍团队，并使用屏幕阅读器进行了广泛的测试，宣布 $39.99 为美元三十九点九九"."

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

但是，如果你坚持这一定会发生，你可以使用aria-hidden来隐藏你不喜欢的NVDA的值，然后你可以写你想在它之后的页面中的短语，通过 屏幕外 CSS 技术就是为了做到这一点.

您的新 HTML:

38.57 美元</p><span>38 美元 57 美分</span>

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

aria-hidden="true" 对屏幕阅读器隐藏 <p> 文本，因此屏幕阅读器只会读取 中的内容.

现在是向用户隐藏 内容的 CSS:

p[aria-hidden=true] + span {位置:绝对；剪辑:矩形(1px 1px 1px 1px)；剪辑:矩形(1px，1px，1px，1px)；填充:0；边框:0；高度:1px；宽度:1px；溢出:隐藏；}

您显然需要根据您的元素、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屋！