如何为屏幕阅读器表达多个价格？

Question

我们正在努力使我们的电子商务网站适用于屏幕阅读器，并且在价格方面存在冲突。当产品打折时，我们的类别和产品页面列出了多个美元金额：

1. 原价（删除线中的价格） 2. 折扣价（客户实际支付的价格） 3. 节省金额（原价 - 折扣价）

是否有任何标准方法可以为视障用户传达所有这些信息？我们不想省略任何内容，但也希望避免使产品列表过长而难以遍历。

目前，VoiceOver将我们的定价读作“价格，$9.99” [TAB]“特价，$7.99” [TAB]“节省，$2”。

我们正在考虑重新标记所有内容以便用户不必通过每个价格进行制表符。 "原价$9.99，现在特价$7.99，节省$2"。

上述方法可行吗？还是有更标准化的方法来传达这一信息？

- btzmacin

---

你是用<s>$9.99</s>还是<del>$9.99</del>来实现删除线的呢？ - Tsundoku

@ChristopheStrobbe，嗯，两者都不是。这是一个具有text-decoration:line-through的span。 - btzmacin

Answer 1

据我所知，目前没有真正的标准告诉你如何准确地呈现定价信息。你需要为你的特定情况找到最佳表述方式。只要所有内容在文本中清楚地说明，就应该没问题。

你必须绝对避免通过视觉格式（含蓄地）提供信息。例如，在没有明确说明这是原始价格并且当前有折扣的情况下，给价格加删除线会为屏幕阅读器用户和视力受损者创建无障碍问题。

因此，基本上你正在正确地通过文本指示所有内容。

现在，根据我自己作为屏幕阅读器用户的经验，从你的例子开始，我会说：

- 首先给出打折后的价格，然后是原价，因为我优先关注的是我将支付的费用。 - 聪明地使用一个简洁的句子来提供完整的信息。例如：“7.99美元，原价9.99美元，节省2美元”。 - 不要首先给出节省的金额，因为它可能被视为过度的营销手段。例如：“节省20％！10美元，原价12美元”与“10美元，原价12美元，节省20％！”

- QuentinC

---

谢谢这个。这就是我要呈现的内容，看看用户体验和业务部门的想法。 - btzmacin

Answer 2

上述方法可行吗？还是有更标准的通信方式？ 您应该避免通过向屏幕阅读器引入过多信息来干扰注意力。 我并不是说这是一个标准的解决方案，但你必须考虑的一个解决方案就是使用aria-hidden来忽略旧价格: $7.99 <div aria-hidden="true">($9.99)</div> 这样，只有屏幕阅读器用户能听到新价格，并真正提高了可访问性。由于文本被划掉，我认为WCAG在这里不需要语音替代。

- Adam

---

无障碍性的一个目标是尽可能为每个人提供平等的体验。如果有视力的用户知道原始价格，那么屏幕阅读器也应该告诉他们。如果未向所有用户提供信息，则这是一个无障碍性问题。 - slugolicious

@slugolicious 我完全同意你的看法，但是在这种情况下，我们讨论的是一段使用了“删除线”混淆过的文本（这对于视力低下或阅读障碍的人已经是一个问题了）。 - Adam

如果代码被混淆并且难以阅读，那么最好将其完全删除。 这应该是非常明确的决定，没有灰色地带。 无论如何呈现（划掉或其他方式），文字都应该存在并可供所有用户使用，或者文字不存在。 中间状态是无法访问的问题。 使用 aria-hidden 或 CSS 格式化使它难以被某些用户阅读，这就是创建 a11y 问题的原因。 - slugolicious

Answer 3

@QuentinC在信息排序方面有一些好建议（最重要的放在前面 - 你将要支付的价格），但是我在原帖中有一个问题，那就是为什么用户要通过所有价格进行tab。这些价格是交互元素吗？

或许这只是术语问题。我认为通过tab，你真正想做的是向右滑动来移动VoiceOver焦点。

如果您决定将其变成一个大句子，需要考虑一件事情，那就是它会使解析所有信息变得更加困难。 VoiceOver用户可以将他们的旋钮更改为“单词”，然后向上/向下滑动以逐个单词地导航，以便听到信息，但是强制他们这样做可能不是最佳的用户体验。但是，提供所有这些信息的事实确实是最重要的部分，所以向您致敬。

此外，当您向右滑动时，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>

作为一个附带说明，尽管和是语义元素，但它们的含义并没有传达给屏幕阅读器。一种处理方法在“使您的标记更具可访问性的简短说明”中有记录。

- slugolicious

---

谢谢您，语音提示一直是我们无障碍项目的恩赐。我将所有这些信息组合成一个单独的长声明的意图在于，其中没有任何元素是交互式的。这是一个产品列表页面，因此网格中的每个瓷砖都是一个链接，无论您是否点击产品名称、图片或价格，都会带您进入同一个产品详细信息页面。除了我们想要保持分离的添加到购物车按钮之外，整个产品摘要被简洁地阅读而不需要用户进行选项卡/滑动，这是有意义的。 - btzmacin