Force the screen reader to announce digits

There are times when we want the screen reader to announce individual letters in a string. This is sometimes up to the interpretation of the screen reader with an acronym, such as NASA. There are other times when we need to force the digits, for instance in a confirmation code IXbib. This page will test options for making a screen reader announce this confirmation code: IXbib

Tests

Using an abbr tag

<abbr title="this is your confirmation code">IXbib</abbr>

Use All Caps

Unrecognized acronyms may be spoken when in all caps. This should work for our test case, but wouldn't for NASA. This also would be problematic for case sensitive passwords and confirmation codes.

<samp>IXBIB</samp>

Separate letters with white space

Breaking the string into individual letters will force the screen reader to announce the digits, but we'd need to use styles to remove the whitespace.

<samp class="collapse">I X b i b</samp>
<style>
.collapse {
	letter-spacing:-2px;
	}
</style>

Use empty tags to separate

<samp>
	I
    <b></b>
    X
    <b></b>
    b
    <b></b>
    i
    <b></b>
    b
    <span></span>
</samp>

CSS3 Speak

CSS3 allows us to specify a specific verbocity of speaking the content of a page. This is not fully supported yet. For instance, this works in Safari on iOS, but not Safari on the desktop. W3C Speak specification.

<samp class="spellout">IXbib</samp>
<style>
.spellout {
	speak:spell-out;
	}
</style>

Collaborators

Advice towards creating this page has come from:

• Victor Tsaran
• Steve Faulkner
• Thierry Koblentz
• Sina Bahram
• Ted Drake