Screen readers: How to make a word with tags surrounding its letters be spoken as a single word, rather than a series of letters?

Question

I have a heading like this:

<h1>This is a t<span>e</span>st.</h1>

The tags around the letter "e" cause Mac OS X Voiceover to read the individual letters of the word separately, rather than the full word. So, it speaks:

"This is a t e st."

Instead of:

"This is a test."

Given that I need to enclose a letter of a word in a tag*, how can I make sure that the screen reader speaks the word as normal?

• N.B: any tag will do. I've tried <b>, <i> and <em> and they all generate the same effect.

Answer 1

One way to work around this quirk is by offering a screen-reader-only version of the text alongside the tidbit that’s throwing off screen readers, such as:

CSS snippet:

.offscreen
{
    position: absolute;
    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

Markup example:

<h1>This is a 
    <span aria-hidden="true">t<strong>e</strong>st</span>
    <span class="offscreen">test</span>.
</h1>

There, the aria-hidden attribute hides the troublesome tidbit from screen readers (<span aria-hidden="true">t<strong>e</strong>st</span>) and the offscreen class visually hides the screen-reader version of the text (<span class="offscreen">test</span>).

The end result is that screen-reader users will hear “This is a test” and sighted users will see “This is a test” within the page.