A Better ReadSpeaker Implementation

Ben and I have recently been working on a project to improve the accessibility of a website we've been involved with for some time.

One of the decisions we took early on in the project was to make the page readable–in other words adding a button, somewhere visible on every page, which, when pressed, plays an audio version of the page.

We chose a system called ReadSpeaker who, as part of the service, will correct any mispronunciations (for example it called pronounces wiki wē'kē - to rhyme with sneaky).

But why bother with text-to-speech when non-sighted users all use screen readers?

Well, apart from the fact that not all blind people are comfortable with screen readers, there are people who may have perfect vision that still find online reading a chore. These people fall into what has been called The Canyon of Pain.

ReadSpeaker's not without it's problems though, most organizations seem to deploy ReadSpeaker in it's out-of-the-box configuration but, while it's a pig to make it play nice, we weren't satisfied with this approach.

I'll show you what I mean; this video shows how ReadSpeaker is implemented in the British Museum's Children's Compass 'microsite':

Here's what happens:

1. You follow a graphical 'say it' link
2. It opens a new window (or, in this case a tab) thus negating the 'back' button)
3. It throws the window to the top-left of the screen for some (no?) reason
4. It makes the window really small
5. 'Success'

A Better Implementation of ReadSpeaker

We thought about using a JavaScript show/hide mechanism to reveal the player when the user clicks on a link–something like "hear this page read out loud", instead of having a popup window we'd have a popup DIV which would be more accessible.

There were two reasons not to do go down this route:

• the audio file would get downloaded every time the page is loaded (not very nice for ReadSpeaker's servers)
• why hide the player in the first place?

So we decided to use a combination of Flash and direct MP3 links:

This has the following advantages

• the file only downloads when the play button is pressed
• people have the option to play the file in whatever they choose
• we can control over the appearance of the player (including the ability to specify it's size in EMs thus making at scale with the size of the text)

And there it is - a usable, accessible audio alternative to every page in the site.