如何强制 Voiceover (MacOS) 正确读出美元金额，忽略内部跨度元素？

Question

我有这个内容（简化）：

<div>
  $<span class="enlarged-text">245</span>.50
</div>

当我在 Safari (MacOS Monterey 12.7.1) 上将

CAPSLOCK + Right

（读取下一个元素）与 Voiceover 结合使用时，它会将其读出为 “两百四十五美元 50 美分”，根据需要。

但是，使用画外音的自动读出功能 - 使用

CAPSLOCK + A

启动 - 画外音非常奇怪地读出 “两美元，四十五点五零”。有办法解决这个问题吗？

我在周围的 div 上尝试了未记录的

role="text"

，它有所帮助，但使用自动读出器读取为 “两百四十五美元，五十”。使用

CAPSLOCK + Right

读作 “两百四十五美元点五零”。

<div role="text">
  $<span class="enlarged-text">245</span>.50
</div>

我也尝试将每个部分放在单独的

span

中，但这没有什么区别：

<div role="text">
  <span>$</span><span class="enlarged-text">245</span><span>.50</span>
</div>

Answer 1

由于您遇到与 Voiceover 的自动读出功能不一致的行为，请尝试使用

aria-label

属性显式指定应由 Voiceover 读出的文本（ARIA：可访问的富 Internet 应用程序）。

<div aria-label="245 dollars and 50 cents">
  $<span class="enlarged-text">245</span>.50
</div>

您还可以使用

aria-hidden

属性 隐藏导致屏幕阅读器读数不正确的元素，并添加一个视觉隐藏的

span

，其中包含屏幕阅读器的正确格式。

<div>
  <span aria-hidden="true">$<span class="enlarged-text">245</span>.50</span>
  <span class="visually-hidden">245 dollars and 50 cents</span>
</div>

.visually-hidden

是一个在视觉上隐藏内容但又可供屏幕阅读器访问的类。
它将被定义为：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

（摘自“CSS实际应用/仅供屏幕阅读器用户使用的不可见内容”）

您还可以尝试使用

content

CSS 属性与

::before

或

::after

伪元素来注入货币符号，这可能不会干扰 Voiceover 的读出逻辑。

<div class="price">
  <span class="enlarged-text">245</span>.50
</div>

.price::before {
  content: "$";
}

---

正如QuentinC在评论中所指出的：

属性

aria-label

和

aria-labelledby

仅适用于交互式/可聚焦元素和地标，或具有此类角色的元素。所以，在这种情况下它不起作用。

实际上，

aria-label

有时可以用在非交互式元素上以提供可访问的名称，但它的支持在不同的屏幕阅读器和场景中确实可能不一致。

目标仍然是确保屏幕阅读器正确地将美元金额解释为整数后跟美分，而不会被 HTML 结构误导。

您可以尝试将美元符号和数字组合在一个没有视觉空间的

span

中，然后使用CSS仅在视觉上放大美元金额部分。

<div>
  <span aria-hidden="true" class="price">$245<span class="cents">.50</span></span>
  <span class="visually-hidden">245 dollars and 50 cents</span>
</div>

.price .cents {
  font-size: smaller;
}

或者，如果无法修改视觉外观，您可以使用 JavaScript 在页面加载或内容更改时根据跨度的内容动态设置

aria-label

属性。

window.onload = function() {
  var priceDiv = document.querySelector('.price-container');
  var price = priceDiv.innerText;
  priceDiv.setAttribute('aria-label', price.replace('$', '') + ' dollars and ' + price.split('.')[1] + ' cents');
};

<div class="price-container" role="text">
  $<span class="enlarged-text">245</span>.50
</div>

JavaScript 方法动态操作

aria-label

，确保标签始终设置为需要读出的正确美元金额。

如果由于 Voiceover 的特定怪癖，上述解决方案都不起作用，请按照 QuentinC 的建议检查是否有任何现有 CSS 规则干扰屏幕阅读器正确解释内容的能力。

Answer 2

使用 JavaScript，你可以让它变得有点动态，但一点也不完美

window.onload = function() {
  var priceDiv = document.querySelector('.price-container');
  var price = priceDiv.innerText;
  priceDiv.setAttribute('aria-label', price.replace('$', '') + ' dollars and ' + price.split('.')[1] + ' cents');
};