如何为屏幕阅读器表达多个价格?
How to express multiple prices for screen readers?
我们正在努力使屏幕阅读器可以访问我们的电子商务网站,但在定价方面存在冲突。当产品打折时,我们的类别和产品页面会列出多个美元金额:
- 原价(删除线)
- 折扣价(客户实际支付的价格)
- 储蓄(原价 - 折扣)
是否有任何标准方式可以为视障用户传达所有这些信息?我们不想遗漏任何东西,但也希望避免使产品列表太长而无法遍历。
目前,VoiceOver 将我们的定价读作 "price, .99" [TAB] "sale, .99" [TAB] "savings, "
我们正在考虑将所有这些重新标记为一个语句,这样用户就不必在每个价格中切换。 "was .99, now on sale for .99, save "
以上是否可行,或者是否有更标准化的方式来传达这一点?
据我所知,没有真正的标准可以准确说明您应该如何呈现定价信息。
找到适合您的特定情况的最佳公式取决于您。
只要文字写清楚就可以了
您必须绝对避免的事情是仅通过视觉格式(隐含地)提供信息。
例如,在没有明确说明这是原价并且当前有折扣的情况下设置价格删除线会对屏幕 reader 用户和那些可能看不清楚删除线的用户造成可访问性问题。
所以基本上你是在正确的轨道上通过文本指示一切。
现在,根据个人作为屏幕 reader 用户的经验,从您的示例开始,我会说:
- 先给优惠价再给原价,因为我要付的是我要优先找的资料
- 聪明一点,用一句话概括出完整的信息。示例:“$7.99 而不是 $9.99,节省 $2”。
- 不要先给优惠,因为这很容易被认为是过度的营销操纵。示例:"Save 20%! instead of " 对比“10 美元而不是 12 美元,节省 20%!”
@QuentinC 对信息的顺序有一些很好的建议(最重要的第一 - 你要支付的价格)但是在 OP 中困扰我的一件事是为什么用户要 tab 查看所有价格。价格是互动元素吗?
或许这只是一个术语问题。我认为 tab,你的意思是向右滑动以移动 VoiceOver 焦点。
如果你决定把它变成一个大句子,需要考虑的一件事是,它会使解析所有这些信息变得有点困难。 VoiceOver 用户可以将他们的转子更改为 "words",然后滑动 up/down 一次导航一个词以听到信息,但强制他们这样做可能不是最好的用户体验.但您提供所有这些信息的事实确实很重要,所以对您表示敬意。
此外,当您向右滑动时,VoiceOver 会在元素边界处停止,因此如果您遇到类似的情况:
<div>
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
您将听到 "hello" 向右滑动 "there" 向右滑动 "world" .
如果您只想通过一次滑动听到 "hello there world",那么您将需要 未记录(因此不受官方支持)"text" 角色.
<div role="text">
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
附带说明一下,即使 和 是语义元素,它们的含义也不会传达给屏幕阅读器。一种处理方法记录在“Short note on making your mark (more accessible)”。
Would the above work, or is there a more standardized way to communicate this?
您应避免向屏幕阅读器引入过多信息而干扰注意力。
我并不是说这是标准解决方案,但您必须考虑的解决方案是使用 aria-hidden
忽略旧价格:
.99 <div aria-hidden="true">
(.99)
</div>
这样一来,屏幕阅读器用户只会听到新的价格,并真正获得可访问性。由于文本是删除线,我不认为 WCAG 需要在这里使用替代语音。
我们正在努力使屏幕阅读器可以访问我们的电子商务网站,但在定价方面存在冲突。当产品打折时,我们的类别和产品页面会列出多个美元金额:
- 原价(删除线)
- 折扣价(客户实际支付的价格)
- 储蓄(原价 - 折扣)
是否有任何标准方式可以为视障用户传达所有这些信息?我们不想遗漏任何东西,但也希望避免使产品列表太长而无法遍历。
目前,VoiceOver 将我们的定价读作 "price, .99" [TAB] "sale, .99" [TAB] "savings, "
我们正在考虑将所有这些重新标记为一个语句,这样用户就不必在每个价格中切换。 "was .99, now on sale for .99, save "
以上是否可行,或者是否有更标准化的方式来传达这一点?
据我所知,没有真正的标准可以准确说明您应该如何呈现定价信息。 找到适合您的特定情况的最佳公式取决于您。 只要文字写清楚就可以了
您必须绝对避免的事情是仅通过视觉格式(隐含地)提供信息。 例如,在没有明确说明这是原价并且当前有折扣的情况下设置价格删除线会对屏幕 reader 用户和那些可能看不清楚删除线的用户造成可访问性问题。
所以基本上你是在正确的轨道上通过文本指示一切。
现在,根据个人作为屏幕 reader 用户的经验,从您的示例开始,我会说:
- 先给优惠价再给原价,因为我要付的是我要优先找的资料
- 聪明一点,用一句话概括出完整的信息。示例:“$7.99 而不是 $9.99,节省 $2”。
- 不要先给优惠,因为这很容易被认为是过度的营销操纵。示例:"Save 20%! instead of " 对比“10 美元而不是 12 美元,节省 20%!”
@QuentinC 对信息的顺序有一些很好的建议(最重要的第一 - 你要支付的价格)但是在 OP 中困扰我的一件事是为什么用户要 tab 查看所有价格。价格是互动元素吗?
或许这只是一个术语问题。我认为 tab,你的意思是向右滑动以移动 VoiceOver 焦点。
如果你决定把它变成一个大句子,需要考虑的一件事是,它会使解析所有这些信息变得有点困难。 VoiceOver 用户可以将他们的转子更改为 "words",然后滑动 up/down 一次导航一个词以听到信息,但强制他们这样做可能不是最好的用户体验.但您提供所有这些信息的事实确实很重要,所以对您表示敬意。
此外,当您向右滑动时,VoiceOver 会在元素边界处停止,因此如果您遇到类似的情况:
<div>
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
您将听到 "hello" 向右滑动 "there" 向右滑动 "world" .
如果您只想通过一次滑动听到 "hello there world",那么您将需要 未记录(因此不受官方支持)"text" 角色.
<div role="text">
<span>hello</span>
<s>there</s>
<span>world</span>
</div>
附带说明一下,即使 和 是语义元素,它们的含义也不会传达给屏幕阅读器。一种处理方法记录在“Short note on making your mark (more accessible)”。
Would the above work, or is there a more standardized way to communicate this?
您应避免向屏幕阅读器引入过多信息而干扰注意力。
我并不是说这是标准解决方案,但您必须考虑的解决方案是使用 aria-hidden
忽略旧价格:
.99 <div aria-hidden="true">
(.99)
</div>
这样一来,屏幕阅读器用户只会听到新的价格,并真正获得可访问性。由于文本是删除线,我不认为 WCAG 需要在这里使用替代语音。