|
Accessibility Tip:
Add Accessibility To Your Pages
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
When you're designing a Web page from scratch, it just takes a little extra effort to make it accessible to everyone. But what about that site you designed several years ago? Web accessibility principles apply to all pages, not just new ones. Tens of millions of Web pages designed before Section 508 guidelines were released also need updating.
The good news? It's easier than you think.
Evaluate Your Page First
Identify your problems areas before you even consider making any changes. Rank them in order of importance. You may be pleasantly surprised. Often, just a few small changes take care of the major problems!
- Look at your site as many different ways as you can.
- Graphical browsers (Netscape, Opera, Explorer)
- Text browsers (Lynx)
- Assistive technologies (JAWS, IBM's Home Page Reader, and others)
If you don't have access to a variety of browsers and operating systems, Browser Photo can display your page in 16 different operating systems and graphical browser combinations.
- Answer the following questions. Carefully list the problems you find.
- Is the site legible in every browser?
- Do you understand the content when you hear it?
- How does your site look with images on?
- How does it look with images turned off?
- Validate your HTML code. Often, poorly-written HTML code hampers accessibility and causes browser compatibility problems. HTML Toolbox will evaluate your HTML code and alert you to errors and browser-specific techniques that can break your page.
- Identify the problem areas of the site and rank their importance. If the navigation structure doesn't work without special plug-ins or visual cues, that's a major accessibility problem! What about the images? If you're listening to the page, can you tell what the images are about? Can you tell where the links actually go?
- Correct the problem areas in order of importance. Fix the worst problems on your most important pages first and then continue in order of importance.
- Test your page again! This step is just as important as the other five. Without testing, you won't know if your fixes worked - or if you actually made the problems worse! That's why Browser Photo is such a handy tool: you can quickly look at your page in a lot of different browsers and immediately identify problems.
|
Looking at your pages is easy, but it may be harder to rank the problems you find. So next, let's look at some of the most common problem areas on a Web page and discuss how to correct them.
ALT Text With Images
This is the single most important way to increase the accessibility and usability of your Web page. You'd think this would be a given, but many Web sites don't use it!
An alternative text description describes the image. Someone listening to the page being read aloud hears the descriptive text. Without ALT text, they just hear that there's an "image" on the page.
Here's how to include ALT text:
<img src="kittens.jpg" alt="Maine Coon kittens for sale">
ALT text helps visitors with disabilities, displays on the page before the image loads, and (ideally) contains your page's targeted keywords - which helps you increase your search engine rank!
Watch Your Color Choices
You may have relatively few completely blind visitors to your site, but you're quite likely to get a large number of visitors with some form of color blindness - as many as 1 in 12 males!
Combinations of red and green cause the most problems, so be careful if you're designing a Christmas site. Someone with red/green color blindness won't see your information if you use red text on a green background.
But color blindness isn't the only problem with colors on Web pages. There are other considerations too:
- Busy background images: Avoid using busy background images. They can overpower your page content and confuse visitors with limited vision or cognitive disabilities. They can easily get distracted by the image and ignore the text.
- Non-standard link colors: Make sure that your links are visible and easily identifiable. Use standard link colors whenever possible and add emphasis to links using style sheet specifications.
- Color-specific information: Avoid putting important information in a particular color without identifying it any other way. For example, if you have list of products on your Web site and note at the top of the page that "Items in red are sale items," then some visitors won't be able to identify the sale items.
It's better to identify the sale items in a particular section title "Sale Items." That way, even if they're in red, they're still accessible to someone who can't see red - or who can't see at all.
|
Add Text-based Navigation
Many sites like to use JavaScript menu systems, image maps, and image links for navigation. Those systems often create a more attractive look on the page than basic text links.
Unfortunately, they cause problems for some visitors:
- Some people don't use a mouse so they can't access complex DHTML menu systems that depend on the mouse to open the drop-down menus.
- Without ALT text descriptions, visitors with screen readers or text browsers can't tell where the link will take them.
|
You don't have to dump your attractive JavaScript or image-based menu system, but you should always include alternative text-based navigation links somewhere on the page. Most developers place them at the bottom.
Text links give visitors with disabilities a way to navigate through your site and help search engine spiders index and rank your site.
Watch Your Use Of Multimedia
Multimedia - Flash animations, audio files, video clips, etc. - can add a lot of excitement and interest to your Web site. Just make sure that you aren't hiding important site content from some visitors. A screen reader can't interpret an animation or video clip and visitors with hearing problems can't listen to your audio files.
You can still keep multimedia on your site, but avoid using it as the only way to present important information. If you use an audio file to give visitors step-by-step instructions on how to install software, also offer a text transcript with the same instructions.
Flash used to be almost completely inaccessible to people using assistive technologies, but Macromedia's latest version, Flash MX, is packed with accessibility features. Make the most of them if you include Flash on your pages.
If the information is really critical to your Web site - a navigation system, product information, etc., then make the effort to include it in regular text format too. Most visitors will enjoy your multimedia efforts and the rest will thank you for your consideration!
Learn More About Accessibility Issues
The good news about accessibility is that you'll rarely have to completely redesign your Web page to make it accessible. Often just a few little changes to the HTML code make your page friendlier and more usable to all users - not just those with disabilities.
While this article gets you started on the basics, there's still a lot more involved. You can get more in-depth information about accessibility, Section 508, design principles, and more here at the NetMechanic site at our Accessibility Resource Center.
|
