Again while in Austin, Texas, I was talking with Charles L. Chen about his CLiCk Speak Firefox extension and he showed me that by using the new CSS3 property called “say-instead“, which is used to allow screen readers to pronounce words or phrases correctly. Listed below is a few examples of phrases you might use in your posts, which a screen reader would pronounce incorrectly.

The first part of the line is the way you typed it and the second is the way it should be spoken.

• Dr. Kapp versus Dr. Cop
• Homepage versus Home Page
• Pope John Paul II versus Pope John Paul the Second
• Rocky II versus Rocky 2
• Godfather II versus The Godfather Part 2

If the say-instead property were officially part of CSS3 and available to use in browsers you would have to add to your CSS file the different classes for each set of words or sets of words you want to have said properly. A few examples of this would be as follows:

.sayinstead_drkapp { say-instead: “doctor cop”;}

.sayinstead_homepage { say-instead: “home page”;}

.sayinstead_popejp2 { say-instead: “Pope John Paul the Second”;}

.sayinstead_rocky2 { say-instead: “Rocky Two”;}

.sayinstead_godfather2 { say-instead: “The Godfather Part Two”;}

The way you need to get these to work is put a <SPAN> tag around each set of words that needs to have the “say-instead” text read out loud. Below is the example of the code:

• Dr. Kapp versus <span class=”sayinstead_drkapp”>Dr. Kapp</span>
• Homepage versus <span class=”sayinstead_homepage”>Homepage</span>
• Pope John Paul II versus <span class=”sayinstead_popejp2″>Pope John Paul II</span>
• Rocky II versus <span class=”sayinstead_rocky2″>Rocky II</span>
• Godfather II versus <span class=”sayinstead_godfather2″>The Godfather II</span>

I’m spent a bunch of time trying to get this to work in this post and was having trouble, I think part of the problem is that I’m trying to do this inside of WordPress. I created an example on my website to use as the test example for the “say-instead” CSS3 property.

Here is the example created by Charles L. Chen on his website for the “say-instead” CSS3 property. Please give the example page a try by using a screen reader such as JAWS, Window-Eyes, or the Firefox extension Fire Vox created by Charles L. Chen. See my post for more details about Fire Vox.

I hope this information is helpful while building your websites and trying to make them as accessible as possible.