John F Croston III

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.

Over a month ago I downloaded the Fire Vox Free screen reader extension for Firefox that acts like a screen reader and was created by Charles L. Chen.

I found that it was of great use and I assume it simulates most of the major functions that screen readers like JAWS or Window-Eyes can do, since I have never used either one of those.

Here is a little more information about the two screen readers I mentioned earlier and information about there cost.

• JAWS - free trial (shuts off machine every 40 minutes) and $900 - $1100 to purchase a full version .
• Window-Eyes - 60 day trail $39 or $900 to purchase a full version.

Fire Vox does not have all the bells and whistles that the other two have. I have not been able to find how to increase or decrease the speed of the speaking voice.

Some uses for the Fire Vox Firefox screen reader extension.

• To see how your website will be to someone that uses a regular screen reader for someone with visual issues.
• Now close your eyes and listen to your website to see if you can navigate and find information. You should be able to, since you created the website.

After awhile of using Fire Vox you might want to turn off the auto speaking function. All of the commands for Fire Vox on at least a PC are done with CTRL + SHIFT + some default key. To get to the list of functions you have to use CTRL +SHIFT + M to get the pop-up menu and un-click the “Speak Events” and “Echo Keys” checkboxes. This will then only allow the screen reader to be activated when you use the following key strokes CTRL +SHIFT + A or when a pop-up window occurs. This allows someone that needs these functions to still be able to get them to work.

For a full explanation please read the post on the Accessify Forum on how to turn off speaking all the time. To get Fire Vox to stop reading/speaking you can hit any key on the keyboard.

Here are some of the functions that Fire Vox does have are their default settings.

• Auto Read - CTRL + SHIFT + A
• Read Previous - CTRL + SHIFT + D
• Read Next - CTRL + SHIFT + F
• Repeat - CTRL + SHIFT + E
• Say Selected Text - CTRL + SHIFT + O
• Spell Out - CTRL + SHIFT + S
• List of Headings - CTRL + SHIFT + H

There are a great bunch of Fire Vox tutorials on their website that will explain a lot more. There is no point of repeating all that information here.

Here is the links to the exercises from the Fire Vox tutorial page.

1. Reading Text and Navigating Web Pages
2. Getting Additional Information
3. Working With Forms
4. Working With Live Regions

So please download the Fire Vox free screen reader extension for Firefox and try it out. Tell me what you think.

Last year while at SXSW 2007 in Austin, Texas, I spent some time at the Knowbility trade show booth and talked with a young man by the name of Charles L. Chen about his Firefox extension CLiCk Speak. I have found this extension to be every useful to me in that it allows me to listen to what my web pages sound like to a non-sighted individual. It does not have all the features of that the major screen readers like JAWS and Window-Eyes have, but CLiCk Speak at least let‘s you hear the information on your pages.

The following text is an overview of CLiCk Speak from their website.

“CLiCk, Speak is designed for sighted users who want text–to–speech functionality. It doesn’t identify elements or announce events - two features that are very important for visually impaired users but very annoying for sighted users. It also has a simplified, mouse driven interface that is designed to be easy for users familiar with point-and-click graphical user interfaces. Like Fire Vox, CLiCk, Speak works on Windows, Macintosh, and Linux; and Fire Vox has multilingual support, making it great for users who are trying to learn a foreign language and need to hear foreign language web sites read out to them for practice.”

The three main features that I have used is the one that just reads down the page from the begining of your code, so source order does matters, after pressing the “Auto Reading Mode” button.  Next it has a “Stop Speaking” button so you can stop it from reading of the page whenever you want to and just push the “Auto Reading Mode” button again to resume from where it left off. The final feature is where you higlight a section of text and clic the “Speak Selection” button and  it will only read that part of the page. I could see this as being useful to read a part of the page that you have just updated and wanted to make sure it sounded good. Another advantage to the highlight and read text feature is that if you wanted to go to lets say <a href=”>ESPN.com or CNN.com you could have it read you the article or sport scores, while the browser window is only showing in the toolbar at the bottom of your page. That is if you have headphones on, so no one finds out. It could be used by people that have english as a second language to learn english, since it also highlights each sentance as it reads them.

Charles L. Chen and company have another Firefox extension called Fire Vox. From what I have read this one is more like a normal screen reader.

The followng text is a summary from the website.

“Fire Vox is designed to accommodate different users with different needs. For visually impaired users, all Fire Vox commands are keyboard activated. In addition, the keyboard commands can be easily reconfigured in the self–Fire Vox Options menu to avoid conflicts with other accessibility software products or to suit personal preferences. For sighted users who need a screen reader, such as web developers interested in testing their webpages or educators who work with visually impaired students, Fire Vox’s highlighting feature makes it easy to keep track of where it is reading from on a page. This highlighting feature is also useful for dyslexic users and partially sighted users.”

While at last weekends DC Adaptive Technology meet up I talked with Patrick Timony about another free screen reader, that is called Thunder, which is free.

I have not tried the Fire Vox Firefox extension or the Thunder screen reader yet, but I plan on trying them out in the next week or so and will report back on what I have found out.

I hope these products are helpful to you in your work and  can save you money by not having to get JAWS or other expensive screen readers that cost  hundreds of dollars.