使屏幕 reader 将“16”读为 "sixteen"

Question

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

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

OS X El Capitan 的 VoiceOver Utility 将其读为 "1 6 位数字"，但我希望将其读为 "Sixteen digit number"。这可能吗？如果可以，怎么做？

我尝试了以下方法：

<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 位数字[=24]，它会尽可能地读取它=]作为一个单词（和某种字母数字首字母缩略词）。

因此，您在 label 标记内放置的不同 CSS 指令不会有任何效果，因为替代文本已被计算。

您可以使用 aria-label:

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

您也可以尝试在连字符的 place/supplement 中添加一个不可见的停顿或某种字符。根据 Voiceover 计算文本的方式，以下可能有效。

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

使屏幕 reader 将“16”读为 "sixteen"

Make screen reader read "16" as "sixteen"

html

accessibility

numbers

screen-readers