Main Menu: Hearing the Page: Page 1

Hearing the Page

In order to best understand why certain techniques yield a more accessible design, you have to hear the page, not just look at it and guess what is accessible and what is not. By hearing the page, you experience the page as a blind user would with the aid of speech output software. Give these pages a listen (click to hear):

Bad Page	Good Page

"Today we have the naming of the parts"

If the sound bites went too quickly for you, then here's some food for thought - we slowed down the JAWS (most widely used speech output software product) output to make it accessible for you sighted users. The average blind user bumps up the speed a couple of notches. Just in case you didn't hear everything that zipped by, let's discuss the differences in how the pages sounded. In the bad example, the graphics are not identified in any way except as "graphic." Gee, that's helpful - especially for those graphics that are links! In the good page, every graphic has an alt tag - a meaningful alt tag that conveys important information to the person hearing the site.

Flow

In the bad example, nothing gets read in the order you would want. A sighted person would immediately clump all the buttons together and know that the navigation is along the left side of the page. The blind user hears these links interspersed with all the content on the page because the screen reader reads left to right, straight across the screen in a single line. In the good example, all the elements are purposefully arranged so the person hearing the site encounters each piece of information in a specific order. Take a look at a transcription of JAWS running on each example, and you'll see the difference in the renderings (transcription of bad, transcription of good).

Over time, as you keep accessible design considerations in mind, you will begin to actually hear the page as you're constructing it, not just see the page. It's all about flow. What will the user encounter first, second, so on? What do you want the user to hear first, second, so on? What elements disrupt the flow? What layout aids the flow of information?

All of this may seem overwhelming and time-consuming to apply to every single page. However, some very simple techniques will help you build accessible web pages without having to explicitly question every element on every page in your site. Simple things to keep in mind to make your designs accessible include:

1. Make sure the first item on a page tells your users where they are
2. Make sure your navigation is one of the first things your user encounters (and last for long pages)
3. Put descriptive text with every graphic (we'll cover variations on this theme)
4. Use CSSs and tables very wisely when laying out a page (these help with how content is read aloud)