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

IXbib


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

IXBIB


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

I X b i b


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

Use empty tags to separate


I

X

b

i

b

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

IXbib


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

Collaborators

Advice towards creating this page has come from:

Author: Ted

Accessibility is more than making sure images have alternate text. I work with engineers, product managers, and designers to understand how accessibility impacts the users, set realistic deadlines, and create the solutions to provide a delightful experience to all users, regardless of their physical, sensory, or cognitive ability.

Leave a Reply

Your email address will not be published. Required fields are marked *