Question

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

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

OS X El Capitan的VoiceOver Utility将其读作＆＃34; 1 6位数字＆＃34; ，但我想将其读作 ＆＃34;十六位数＆＃34; 。这可能吗？如果是这样，怎么样？

我尝试了以下内容：

<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>

让屏幕阅读器阅读＆＃34; 16＆＃34; as＆＃34;十六岁＆＃34;

2 个答案: