Accessibility is not a new issue, but there is still a great deal of confusion out there about what makes a Web site accessible and why it matters. If you don’t think this topic is important, consider this:
Over 10% of the online population is disabled (750 million people worldwide, 55 million Americans) — Watchfire
Barriers to websites restrict access to information for over 550 million people with disabilities worldwide, representing over $176 billion in discretionary income. — iCan
If that doesn’t matter to you or your organization, remember that some of you are required by law to have accessible sites, and others may be sued if your sites are not accessible. If you happen to work for the Federal government, Section 508 of the Rehabilitation Act mandates that Federal Web sites need to be designed so that every citizen can access the information. And finally, remember that we are all just seconds away from being disabled ourselves. At any moment, an accident or diagnosis could change our lives. If that happened, we would want to retain our independence as much as possible, and the Internet would be a big part of that.
In this article, I am going to focus on a few basic accessibility topics and some simple ways to test your site for problems. This is not an article on absolute compliance with the law, but consider the suggestions presented here as a step in the right direction.
Test 1: Turn Off the Graphics
View your Web site and turn off the graphics. To do this in Internet Explorer, click “Tools,” then “Internet Options,” then “Advanced.” Look in the “Multimedia” section and uncheck the box that reads, “Show Pictures.” Click “Apply,” then refresh the page.
Are you able to use and understand your site without the graphics? If not, you need to add ALT tags to your code. These tags provide text information for each graphic, allowing visually-impaired users to understand what the graphic represents. These tags are especially important if you use graphics as navigation buttons. If you use an image map with “hot-spots” for navigation, provide text links in addition to this system. Not only will this ensure that all users can access the pages, it will allow search engine spiders to find them.
Test 2: Copy Your Site Into Notepad
View your page with your browser and choose “Edit,” then “Select All,” then “Edit,” then “Copy” from the menu. Next, open Notepad or some other text editor and paste the text into it. You are now seeing your site with the contents linearized, much as a screen reader “sees” it and reads it to a blind user. Is the site in the correct order, or is the text scrambled? If the site doesn’t make sense, you need to examine your layout structure and redesign the layout cells so that the text falls into the correct sequence when the page is linearized .
Test 3: View Your Site in Black and White
Print your pages with a black and white printer and make sure that everything on it can be interpreted when there are no colors present. Is there enough contrast to make the text legible? Change any instructions on the site that rely upon color, such as “Click the green button to submit the form.” If you use maps or pie charts, can you differentiate between the colors that you have used? If not, try changing the colors or adding a pattern to some of them to make them easier to read in black and white.
To test your site even further, run a page through the color-blindness simulator found at Vischeck.com. This tool will create a graphic of your page as seen by a colorblind person.
Test 4: View Your Site Without Your Style Sheet
To do this, either move your external style sheet to another folder or temporarily rename it. Next, refresh your page to see your site without the designated font faces, colors, or other special formatting features specified in your style sheet. Does your page look very different in terms of font faces and sizes? Good – it should. Does it still make sense and is it useable? If not, you may need to consider other methods of accomplishing your layout or formatting goals.
If your site looks exactly the same after performing this test, you have probably used the FONT tag and hard coded your font faces and sizes. When you do this, you make it impossible for a visually-impaired user to override your font choices with ones that are larger and more legible. You should redesign your site so that all text formatting is done with an external style sheet instead of with the FONT tag.
Test 5: Unplug Your Mouse
Are you able to use your site effectively without a mouse? Many disabilities make a user unable to control a mouse, and these people will use your site with the keyboard only. Can you navigate your way to every page using only the Tab, Arrow, and Enter keys? Can you still use your forms?
Do you have a menu system that is only visible during a mouseover? If so, can you access the interior pages without a mouse? You don’t have to get rid of your mouseover menus, but be sure to provide another way to access the pages, such as a text-only Site Map or text links in addition to the pop-up menus. This will also ensure that search engine spiders can find all of your pages.
Summary
If you revamp your site so that it passes these five tests, I can’t guarantee that your pages will be completely accessible, but you will be much closer to that goal. For more information, check out these sites:
Sue Bolander started Webworks7 in 2000, with a focus on creating Web sites for small business and government and making Section 508 compliance a standard feature of her designs. She is a Certified Master HTML Programmer and is also certified in Web Design for Accessibility. Webworks7 provides site design, redesign, JavaScript programming, and training in client-side Web environments.
