Part of usability testing includes the use of screen readers. A screen reader is a product that attempts to convert text on a web page to a text to speech format called braille output. These products are designed to assist visually impaired people using the Internet.

Fangs is a firefox extension that provides a down and dirty quick look at what a screen reader would interpret from a web page. Once the extension is installed just right click on the page and left click View Fangs. This page is displayed in three tabs:

• Screen reader output
• Headings List
• Links list

The page text is rendered as a screen reader would output the words. Headings are defined in blue identifying the level and links, bullets, lists and the like are identified in a grey color.

The second tab displays the headings in tab order and defines their level. This is how the page is scanned for content without reading/listening to the entire page. The way your page flows and logical order can be easily seen, or not seen, by looking at this tab.

The final tab simply displays the anchor text of the links on the page. This is used to find related material by screen readers and is a good way to identify if your links make sense to a visitor interested in a subject, as opposed to dropping links on a page just because you can.

This extension has been out for a while now but doesn't seem to be widely used. I certainly missed it up until now but find it very handy during the development cycle. I recently changed a form element label that I missed prior to using this extension. I could not have told you for the life of me what was supposed to go in the textbox the label described until I used this handy little tool.

Fangs Screen Reader download page

Technorati Tags: