Working with speech readers

Upgrading my code could cause problems

[Hester]

I'm testing my site with pwWebspeak, a free speech reader for the web. Here are some issues I need to think about!

• Since our company name is spelt out in full already, I do not use <acronym> around it. This means it gets read as a strange word rather than letter by letter. I've solved this by putting a space between each letter and wrapping it in a span. Then I've styled it

  'letter-spacing:-2px;'

  so it looks like there are no spaces between the letters on screen. Is this silly?

• There are several two-letter codes on some pages that are not acronyms. Most are read out correctly but some are pre-defined by the program as longer words! I've heard "KB" be pronounced "Kilobytes" and "AZ" as "Arizona"! :-D What should I do?

• A supplier name in one list begins with a soft G, but the program gives it a hard G. Is there a way to specify the way words are spoken? Should I be using aural CSS?
  

It's time for The Great Menu Debate too. I need this one clearing up once and for all. Should a menu list of links go first or last on the page? If it goes last, then the speech reader will have to read all the way down a page, which might contain a large amount of text. Otherwise the user cannot move to another page. However, I read time and time again on this forum that the menu should go last.

If you put the menu first though, it gets read out in full on every page before the user gets to the main content.

I have always included a "Skip Navigation" link which jumps past the menu. But when the page is read out, you've got to be quick to catch it.

So what is the best method with regard to speech readers?

[BlobFisk]

Hey Hester,

In no particular order:

There are several two-letter codes on some pages that are not acronyms. Most are read out correctly but some are pre-defined by the program as longer words! I've heard "KB" be pronounced "Kilobytes" and "AZ" as "Arizona"! :-D What should I do?

Use the <abbr> abbreviation tag here:
<abbr title="Arizona">AZ</abbr>

It's time for The Great Menu Debate too.

The recommendation is to put content first, followed by your navigation. If that is out of the question, then use a skip nav link as you say. Don't forget about accesskeys and rel links as supplemental navigational aids - these can be very powerful for screen reader users.

If your company name is an acronym, then you should use the <acronym> tag.

[Hester]

Thanks Blob. I'm not wanting the letters to be read out as "Arizona", but "A Z". But how?

The company name is 5 letters which is short for 5 long words. I would imagine (since the speech reader speaks acronyms and abbreviations out in full automatically) that users would get frustrated hearing the full company name every time it is used on the page. Or maybe if I acronymed it once on the first line?

[mattur]

I'd recommend trying out your pages in Jaws first Hester, as this seems much more popular among the visually-impaired.

You can download a trial from the Freedom Scientific website.

[Hester]

From the Betsie [bbc.co.uk] (BBC Education Text to Speech Internet Enhancer) pages:

What Betsie does is to rearrange the content on the page in such a way as to make it more legible for people using text to speech converters or screen readers. While some screen readers have a decolumniser built in, Betsie includes BBC specific code to deal with the problem of the left hand navigation bar, which most decolumnisers would place at the top of the page. Betsie knows about the BBC navigation bar and places it at the bottom instead, allowing the user to get straight to the actual content of the actual page.

[nafmo]

To get a word spoken out letter for letter, you could use

span.whatever {
  speak: spell-out;
}

in CSS. I don't know if it's supported anywhere, though.

[pageoneresults]

Here's some good reading from the W3C in regards to Aural Style Sheets [w3.org]. These are supported by CSS2 compliant browsers and speech readers.

A related topic...

Abbreviation as keyword [webmasterworld.com]