Make screen reader read “16” as “sixteen”

Question

I currently have a form element with a label:

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

This is read out by OS X El Capitan's VoiceOver Utility as "1 6 digit number" but I would like to get this to read as "Sixteen digit number" . Is this possible? If so, how?

I have tried the following:

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

And possibly some other option I cannot remember. Any suggestions would be gratefully received.

---

If anyone finds this after a struggle, please comment with some of your failed search terms to help others find this useful info. Thanks.

Answer 1

Maybe:

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

Where sr-only is:

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

Answer 2

After calculating text alternative for the label (" 16-digit number "), it reads it as well as possible considering 16-digit as a single word (and some sort of alphanumeric acronym).

So the different CSS instructions you put inside the label tag can't have any effect because the text alternative has already been computed.

You can use aria-label :

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

You can also try to add an invisible pause, or some kind of character in place/supplement of the hyphen. The following might work depending on the way Voiceover calculates text.

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