Gelfand Design

Accessibility testing is a big job. Our major accessibility standards, Section 508 of the 1998 Rehabilitation Act and the international protocol Web Content Accessibility Guidelines (WCAG) 2.0, include criteria that can be checked by machine, but much of the testing requires human judgment. For instance, a machine can check that every image has an ALT attribute, but only a human being can determine whether the contents of the ALT attributes are helpful.

But fear not—the longest journey starts with a single step! Using a few simple tools, you can quickly check for accessibility issues on your site, even if you’re not a Web developer!

In my last post about why it’s so important to make your Web content accessible, I picked on another company’s Web site. Felt a wee bit guilty afterward. This time I’ll use my own site, gelfanddesign.com, for my examples!

First Things First: Get the IE Accessibility Toolbar

This handy toolbar gives you access to a wide variety of testing tools. Ordinarily I work in Firefox, which also has accessibility tools included in the Web Developer Toolbar, but the IE version has quite a few additional features, including access to major accessibility tests such as Cynthia Says and WAVE. Also, screen reader users will be using IE as their browser, so if you’re testing for screen readers anyway, you might as well use the IE toolbar.

Download the IE accessibility toolbar.

Test 1: Validate Your Page

The rules for how Web pages should be built are determined by the World Wide Web Consortium (W3C). The DOCTYPE in your Web page source tells your browser which W3C protocol to check your page against. When your page follows all of the W3C’s rules for that DOCTYPE, your page is considered valid.

A valid page is not necessarily accessible, but it does show that you are headed in the right direction. My homepage is valid XHTML 1.0. Yea!

Test 2: Turn off CSS

Cascading Style Sheets are the files that tell your browser how to display the elements in your HTML pages—from font colors to the positioning of text and images on the page. Adaptive technology (and search engines!) don’t perceive CSS—they’re blind, remember? They just read through the page. Turn off CSS to see if the content on your page is still readable and displays in an order that makes sense.

I don’t see any real problems on my home page. The content is still available, and the order (navigation links, introduction, columns with supporting content, footer links) makes sense when read from beginning to end.

Test 3: Turn Off Images

Often, in an attempt to make beautiful designs, we make heavy use of images. When we use images in place of text, however, we risk hiding that content from a lot of users:

• Adaptive technology such as screen readers
• Search engines
• Anyone who has chosen to disable images in their browser (for instance, the person might have a slow internet connection and want pages to load as quickly as possible)

How does your Web site look with images disabled? Can you still get to all of the content? Does the page still make sense?

For some reason IE’s accessibility toolbar doesn’t have an option for disabling images (yuck), so I am switching over to Firefox for this test.

I see one big problem here: My company name is no longer visible. Only the logo image contained “Gelfand Design.” Oops! No worries; this is easily fixed using one of several image replacement techniques.

Test 4: Check the ALT Text of Images

All images (<IMG> elements) should have an ALT attribute:

<img src="image.jpg" alt="text describing image goes here" />

The ALT text should describe your image. If the image is purely decorative, or if the image is placed directly beside a caption or description, then the ALt tag can be “empty:”

<img src="image.jpg" alt="" />

If an image is wrapped in an anchor (link) element, then it absolutely needs alternative text.

<a href="/path/to/destination.html"><img src="image.jpg" alt="this image is my only clue about where this link goes!" /></a>

The W3C validation test will reveal if images are missing ALT attributes, but you also need to evaluate whether the ALT attributes needs to contain text and ensure that the ALT text is useful. Selecting Images»Show Images in the IE accessibility toolbar will outline all IMG elements on the page, as well as the corresponding alt text.

Test 5: Check the Contrast of Colors

Ever tried to use your cell phone outside but weren’t able to see the screen because of the sunlight? People who have problems discerning contrast or who are color blind have this problem all the time.

The IE accessibility toolbar has a number of different tools to help you see your Web page through another person’s eyes. The Color Analyzer is a handy way to see if the contrast ratio meets accepted guidelines.* There’s even an awesome little eyedropper tool to help you catch the color you need to analyze.

The text on my site is usually black on white or dark blue on white, both of which pass the test. However, the blue background colors in my navigation bar do not, so that is an area I will need to correct by using a darker background color.
* Currently the acceptable contrast ratio per WCAG 2.0 is 4.5:1 for the presentation of text or images of text. Large text may have a contrast ratio of 3:1. Text in logos/brand names or purely decorative elements are not subject to this criterion. Read more about this rule.

The Tip of the Iceberg

You can use these tests on a few representative pages of your site (the home page, a landing page, a plain content page, and your contact form page) in just a few minutes. You’re only scratching the surface, but the results should give you an idea of areas you can improve, often with simple solutions like adding ALT text to your images, updating font/background colors, and correcting HTML markup errors.

Stay tuned for more information on ACCESSIFYING your site!