如何让屏幕阅读器正确读取双/三...数字？

Question

我正在将一些辅助功能代码写入我的应用程序。问题是，当我在 div 中打印一个数字（例如：21）供屏幕阅读器阅读时：

<div id="screenReaderBox" aria-show=true tabindex=0> I have 21 cookies</div>

屏幕阅读器以下列方式读取 div：“我有 两个一 cookie”而不是“我有 二十一个饼干。”

如何修改屏幕阅读器的 div 以正确获取 html 内容？有什么变通的解决方案吗？

我试过 parseInt();结果一样

Answer 1

您可以使用aria-label 来帮助屏幕阅读器：

<div id="screenReaderBox" aria-show=true tabindex=0>
       I have <span aria-label="twenty one">21</span> cookies</div>

但您必须注意，如果您使用盲文显示器（或任何非文本转语音辅助技术），这可能会因大数字（例如 123456789）而适得其反：

我有 123456789 块饼干

在我看来，您的屏幕阅读器在读取数字方面的实现很糟糕（或者是某些配置选项？），您应该忽略这个问题，因为它没有实现正确的数字解释方式。