使屏幕阅读器将“ 16”读为“十六”

Question

我目前有一个带有标签的表单元素：

<label for="number">16-digit number</label>

这是由OS X El Capitan的VoiceOver Utility读出的，是“ 1 6位数”，但我想读为“ 16位数” 。 这可能吗？ 如果是这样，怎么办？

我尝试了以下方法：

<label for="number"><span>16</span>-digit number</label>
<label for="number"><span style="speak-numeral: continuous !important;">16</span>-digit number</label>
<label for="number"><span style="speak-as: normal !important;">16</span>-digit number</label>
<label for="number"><span style="speak-numeral: continuous !important; speak-as: normal !important;">16</span>-digit number</label>

可能还有其他我不记得的选择。 任何建议将不胜感激。

---

如果有人在奋斗后发现此问题，请用一些失败的搜索词发表评论，以帮助其他人找到此有用信息。 谢谢。

Answer 1

也许：

<label for="number">
  <span class="sr-only">sixteen</span>
  <span aria-hidden="true">16-</span>
  digit number
</label>

其中sr-only是：

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

Answer 2

计算完标签的替代文本（“ 16位数字 ”）后，它会尽可能考虑将16位作为单个单词（以及某种字母数字首字母缩写词）进行读取。

因此，放入label标签中的不同CSS指令不会产生任何效果，因为已经计算出了替代文本。

您可以使用aria-label ：

<label for="number" aria-label="16 digit number">16-digit number</label>

您也可以尝试添加一个不可见的暂停，或某种形式的字符代替/补充连字符。 根据Voiceover计算文本的方式，以下操作可能会起作用。

<label for="number">16-&shy;digit number</label>
<label for="number">16&dash;digit number</label>