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.

Winifield

That sounds like a serious bug in OS X Voiceover. Can't think of any workaround than serving a special screen-reader friendly site with specially edited/condensed content.... – Arvonio

There are some HTML properties that can influence how Voiceover works, see e.g. alxgbsn.co.uk/2011/06/06/… maybe help can be found in that direction. – Arvonio

We were running in to this as well. Sucks. – Vaclava

Would (ab)using abbr[title] of any help here? @Pekka웃 Even if it's pretty annoying, I don't see this as a bug. A word is made of consecutive letters, not of consecutive elements. – Lysander

@Felipe not if the elements aren't used to visually separate words. This behaviour makes absolutely no real-world sense IMO. It would be like separating a word in a Word document because part of it is red, or italic, or underlined - just because internally, the change of formatting requires its separating into multiple technical units (like tags). – Arvonio

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.

Jerkin

Answer 2

This not a solution but it might be an useful workaround if your situation allow you.

I felt you want to wrap one letter to render that differently, instead you can show the word "test" as an image by doing so you can create it any way you want and put the word "test" as alt attribute in image

<h1>This is a <span id="specialWord" ><img src = "testImage.jpg" alt = "test"></span>.  </h1>

So if it is like that OS X voice over will read it properly. Because if I remember correctly it reads the alt attribute of an image.

Now in that case a problem might arise. Anybody want to select it as a text then it would not be possible. You can solve that by calling a javascript function to dynamically change the inner html of the span tag (with id="specialWord" ) to "test" from the img.

Hope you can benefit from that.

Underwriter

Unfortunately this adds more problems than it solves. Text embedded in an image is hard to maintain, looks bad on retina screens, and doesn't work for localization. – Quartered