Web Site Accessibility

• • 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

• • Roughly 1 in 20 people have some sort of color vision deficiency. — Vischeck

• In the US, 54 million people, 20% of the population, have a disability. As people are living longer and the population ages, the number continues to grow. If you add persons with temporary disabilities due to accidents or illness, it’s easy to understand why accessibility is an important issue. — Section508.gov

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. Creating sites that allow disabled individuals to access information, products, and services on the Internet in spite of physical or cognitive limitations is not too much to ask of us as professional Webmasters.

In this article, I am going to focus on a few basic topics and some simple ways to make your site far easier for a disabled individual to use. This is not an article on absolute compliance with the law, and doing these things will not guarantee that your site meets any specific requirements. Neither the Section 508 legislation nor the Access Board standards that define the law provide a compliance “checklist.” Instead, the burden to determine if a Web site meets the standards lies with you. Consider the suggestions presented here as a step in the right direction.

The subject of this article is Our Home Page, a site for an imaginary company. This site is not intended to resemble an actual Web site. In fact, if this site resembles your company Web site, I beg you to get a new Webmaster. I created this one-page example not to dazzle you, but to illustrate several accessibility issues that are hidden within the HTML code and can be remedied without drastic changes to the site’s appearance. Of course, this site could use a complete makeover, but that’s not the point of this article. The point is that no matter what your design, good or bad, it doesn’t have to change to become accessible.

Layout

Issues and problems:

A user with vision impairment may override your style sheet (more on this in the next section), so you need to make sure that your page layout still makes sense when your style sheet is not used. The easiest way to test for this is to temporarily rename your style sheet, thus breaking all of your links to it, and viewing your site. This page relies upon a style sheet to arrange the page into columns. When the page is viewed without the intended style sheet, the layout is lost.

Solutions:

The style sheet layout instructions are removed and a very simple layout table is applied to the page. Let’s look at the page, which is still being viewed without the style sheet. I’ll show it first with the table borders turned on, then with them off. Notice that even without the style sheet, the layout is correct. If you require columns on your page, try to accomplish this with just one simple table, not a series of nested tables. The table we are using on our page is very simple and should not present difficulties to those using screen readers.

Issues and problems:

Users who are completely blind often use screen readers or Braille readers. A screen reader is a machine that reads the site to the user so that he can hear the text. A Braille reader reads the text, then raises and lowers pins on a pad to write that text in Braille so that the blind user can read it. For those using screen readers, the reader will normally read a table starting at the top, left cell and working down the contents of that cell, then across the row to the next cell, reading it in its entirety, then across until it hits the end of a row. It then starts in the left column of the next row, and so on. The table that is used to present actual data on our subject page needs to be presented with the data arranged in proper rows and cells, not in the “cheater” way it is presented in our example. In its current condition, the data table will not be read properly by a screen reader.

Solutions:

I will put the data into rows and cells, which will make the layout of this information far easier for a screen reader to interpret. A good way to check your layout to see if your table structure would be confusing to a user with a screen reader is to select all of the text in your browser window and copy it to your clipboard. Then paste that text into Notepad and see if it still reads in the proper order. If you try this on the subject site before and after the data was placed into rows and cells, you can see that the site is much easier to understand after this change.

Vision Impairment/Blindness

Issues and problems:

People with vision impairment may simply use tools that increase the font size, and perhaps the font face and colors, to make the sites easier to read. This can be accomplished by a number of methods, including browser settings or custom style sheets. The subject page contains 24 uses of the FONT tag that specify size in absolute terms, such as FONT SIZE=”2.” Because the font is fixed in size, users are not able to change the size of text, either to compensate for the resolution or size of their device, or because of a visual impairment.

Solutions:

If you insist upon using the FONT tag, use relative size specifications, such as SIZE=+2 rather than SIZE=”5″. Better yet, because the FONT tag is a deprecated element, meaning that it has been removed from the HTML specification and is not expected to be supported in future browsers, don’t use it. Use an external style sheet to specify your font sizes and faces. Not only is the far easier for you to write and maintain, it makes your pages more accessible to those with vision impairments. This is because many browsers have options to disable and override style sheets, meaning that the user can replace your style sheet with one of her own, which may make the text five times larger or change the font face to the one that is most legible to her.

First I will show you the subject page with all of the FONT tags removed and the font size and face specified in the intended style sheet. You can see it here as it appears to most users. Notice that it looks the same as it did when the FONT tags were present. Now, we’ll apply the custom style sheet that our vision-impaired user wants to use. The sheet calls for very large Arial text because that is what she is able to read. When we apply the style sheet this time, it works because no FONT tags are present. Of course, the custom style sheet has no impact upon the text included inside of the images.

I can hear all of you control-freaks grumbling right now because your Web sites are a thing of beauty and are intended to be viewed with a specific font size and face. Get over it. Do you really want to prevent someone with disabilities from using your site or give them a splitting headache all in the name of artistic expression? Remember, the only people who will see your site without the style sheets are those who choose to override them, and they have good reasons for doing so.

Issues and problems:

Users who cannot see your images need a way to understand what the images represent, especially if they are navigation links. The subject page contains navigation images and an image map that cannot be interpreted by screen readers (or search engines, for that matter) because they lack ALT tags. To get an idea of how the page “looks” to a screen reader,look here. Would you be able to navigate the site under these conditions?

Solutions:

To correct the problems with images and image maps that cannot be interpreted by screen readers, I have added an ALT tag to every image and “hot zone.” Examples of ALT tags are shown below:

<A HREF=”index.html”><IMG SRC=”about.gif” ALT=”About Us”></A>

<AREA SHAPE=”POLYGON” HREF=”michigan.html” COORDS=”9,23 18,100 13,105 22,115 18,159 117,159 113,146 88,129 87,100 84,102 95,95 96,77 114,57 138,45 119,42 116,38 107,44 95,37 90,40 78,30 68,34 51,26 50,15 43,15 43,23″ ALT=”Michigan”>

Check out how the page “looks” to a screen reader with ALT tags on every image and hot zone. Some screen readers will be able to interpret the ALT tags on the states themselves, but others may not. We will resolve this problem in the “Use of a Mouse” section. To sighted users, the page looks like this, with the ALT tags appearing during mouseovers.

Issues and problems:

To help people who are blind find all the hypertext links on a page, a variety of screen readers have adopted techniques to list each of the links consecutively. A screen reader has difficulty in distinguishing between links if there isn’t some sort of element between them. This can be any character, an image, a list element, or a table cell. It cannot be a BR or P tag. The subject page contains image links in the left column that are not separated by anything other than white space. I am referring to the links that read “About Us,” “Products,” “Services,” and so on. As sighted users, you can see the separation between the links, but a screen reader cannot.

Solutions:

There are a number of ways to separate adjacent links. I’ll employ two different techniques. First, I will insert a period between “About Us” and “Products.” This simple step has corrected the problem. If you do not wish to insert a character between your links, an easy way to create an invisible separator is to use a small, transparent image in the .gif format. Insert this image using a HEIGHT and WIDTH of “1” (don’t use 0 because Netscape may then show the image) and use an ALT tag that reads ALT=””. This image won’t impact your layout, but will allow the screen reader to correctly separate the links. Do not use ALT=”Filler” or ALT=”Spacer” because this will be read by the screen reader. I will insert an invisible spacer between the remaining links. Check the appearance of the links now and you will see that the period and spacers have made little or no difference in the page’s appearance.

Here is an example of the coded empty image link:

<IMG SRC=”empty.gif” HEIGHT=”1″ WIDTH=”1″ BORDER=”0″ ALT=””>

About the Author:
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.