Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Presentation

Last updated Oct 17, 2003.

The section on layouts explains the advantages of using CSS (cascading style sheets), one of which makes it easier for people with disabilities to use the Web site, especially because it's easy to create multiple style sheets giving visitors the choice of font size, font type, and color that works best for them. Not only do you have to consider layouts, but also font type and size, colors, images, and video.

Color

About 8% of the male population has a form of colorblindness. If the Web site's choice of colors doesn't have much contrast to a person with colorblindness, he won't be able to use the site. That's where cascading style sheets play a big role. You don't have to sacrifice your color scheme, especially if it's in company colors. Instead, offer an alternate style sheet. You can see an example of alternate style sheets in action at International Herald Tribune on the left side where it shows (+) FONT (-) FONT.

Meet super hot-shot gal football player! Yes, that is a motorcycle helmet and big brother's high school varsity jacket shown in Figure 1, the original photo. Someone with protanopia however, would see something similar to Figure 2 because of a red/green deficit. Another form of red/green color deficit is deuteranopia, which is shown in Figure 3. While protanopia and deuteranopia are similar, notice the shading on the jacket is different. A person with a blue/yellow color deficit has tritanopia and sees something like Figure 4.

Thanks to Vischeck's plug-in, I could see how the pictures look to someone who has color blindness. To see how a Web page looks for people with colorblindness, run or download Vischeck. Though browsers do come with the capability for a user to change the font size and colors, users seldom use these features. Another tip is to avoid using color to mean something. For instance, one site used a color to represent business customers, another color for consumers, and yet another color for retailers. This would be acceptable as long as the site's division is obvious through words and other non-color means.

Images and Videos

When dealing with images and videos, the following should ensure that you cover your bases:

  • Use the alt attribute in the <img> element to briefly describe the image.
  • Use the longdesc attribute in the <img> element for more complex images needing more details.
  • Provide captions or a text-alternative for videos and sound files.

If there is nothing meaningful in the picture, such as a spacer (which is discouraged today, but not eliminated), use alt="" rather than omitting alt altogether. If the image is complex and needs a longer description, use longdesc, which typically links to a file with the description. Following is an example of implementing the alt and longdesc tags:

<img src="file.gif" width="90" height="90" alt="A picture of a file" longdesc="file.html" />

Figure 5 shows an actual image from a Web site. Imagine how much this business is losing out because its text is in an image. Search engines don't notice text in an image. This example doesn't use the alt attribute and, even if it did, the text is too long for it.

Tables

Though many sites are switching to CSS for layouts instead of tables, we still see plenty using tables. To create accessible tables, follow the recommended guidelines:

  • Identify headers and rows by putting them in the first row and first column.
  • Use header elements such as <th> for headers or <scope>, which is an alternative element to <th>. Currently, <th> is more widely supported of the two.
  • Use the <caption> element and summary attribute when possible.

There are more elements you can use for tables, such as <caption>. The summary attribute can be useful, but not all screen readers support it. Therefore, it's helpful to describe or summarize the table in the body of the table or outside of it. It's a lot of work to create accessible tables, which makes using CSS more attractive. As a bonus, CSS makes a site easier to manage and saves times as designers make changes in a CSS file instead of every single page. We know saving time equals saving money to pay for people's time.