GeoCities.us » SiliconValley » Horizon

Making Your Home Page Talk

Ten habits that make a web page work for people who use screen readers.

You don't have to make your page plain like mine. Keep your backgrounds and your clip art and your dancing hamsters. Most of these fixes are invisible to sighted visitors. They just make the page make sense out loud. They also help people on slow modems who turn pictures off, people with text-only browsers, and search engines.

1. Give every picture ALT text

The ALT attribute is the words a screen reader says instead of the picture. Without it, I hear "graphic" or a file name. Describe what matters about the picture, briefly:

<IMG SRC="juno.gif" WIDTH="120"
 HEIGHT="90" ALT="My guide dog
 Juno, lying on my feet">

If a picture is only decoration, like a divider line or a bullet, give it an empty ALT so the screen reader skips it quietly:

<IMG SRC="line.gif" WIDTH="400"
 HEIGHT="4" ALT="">

2. Picture links need ALT text most of all

If a button is a picture, the ALT text is the only name the link has. Say where it goes:

<A HREF="links.html"><IMG
 SRC="btn3.gif" WIDTH="88"
 HEIGHT="31" ALT="My favorite
 links"></A>

Without that ALT, my screen reader might say "link, b t n 3 dot gif." Where does that go? I'll never know.

3. Don't say "click here"

Screen readers can pull up a list of every link on a page so we can jump right to one. On a lot of pages that list says "click here, click here, click here, more, more." Make the link words tell where the link goes:

Instead of: To see my cat pictures, click here.
Try: See my cat pictures.

4. Don't put important words only in a picture

A fancy "Welcome to My Home Page" banner made in a paint program is just a picture to me. If you use one, put the same words in its ALT text. Same for menus made of pictures.

5. Image maps need text links too

An image map is one big picture with clickable areas. Give each area its own ALT text, and put a plain row of text links underneath for anybody whose browser can't use the map.

6. Be kind with frames

Frames are hard for a lot of screen readers and older browsers. If you use them, give each frame a name that means something, and always fill in the NOFRAMES section with real content or at least links to your pages:

<FRAME SRC="menu.html"
 NAME="menu" TITLE="Menu">
<FRAME SRC="main.html"
 NAME="main" TITLE="Main page">
<NOFRAMES>
<A HREF="main.html">Go to my
 page without frames</A>
</NOFRAMES>

7. Tables are read across, row by row

My screen reader reads a table left to right, top row first. If you use a table for layout, like a menu in a left column and your story in the right, check that it still makes sense in that order. For real tables of information, use <TH> for the header cells so they're clearly headers.

8. Don't use color alone

"The links in red are new" means nothing to me, or to the one in twelve men or so who are colorblind. Add a word like "new" too. And please keep enough contrast between text and background. Many of my students have some sight left, and light gray on white, or red on black, is invisible to them.

9. Go easy on things that move

Scrolling marquees and blinking text are very hard to read for people with low vision, and some screen readers read a marquee over and over. If you love your marquee, keep it short, and put anything important somewhere that holds still.

10. Test it

The easiest test: turn off pictures in your browser's preferences and look at your page. In Netscape it's under Edit, Preferences, Advanced. Whatever is left is roughly what I get. Can you still tell where every link goes? Then you've done it.

If you'd like, send me the address of your page and I'll listen to it with my screen reader and tell you what I hear. I've done it for about forty people so far, including a very nice man in Ohio who builds model trains and had 212 pictures on one page, not one with ALT text. He fixed every one.

E-mail: [email protected]

Last updated: September 23, 1999.

Back to Speaking Terms