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):
Audio transcriptions are also available: 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.
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:
- Make sure the first item on a page tells your users where they are
- Make sure your navigation is one of the first things your user encounters
(and last for long pages)
- Put descriptive text with every graphic (we'll cover variations on
- Use CSSs and tables very wisely when laying out a page (these help
with how content is read aloud)