Making Your Page Accessible to the Disabled

If you're here, I guess you're ready to make your page compliant, so before we start, pat yourself on the back -- you are about to do a true service to the disabled and that is commendable.

I will break this page up into several sections. You can read straight through or follow the links below to the steps that you need.

The first step in making your page Bobby compliant is to make sure you're using proper HTML. Good, clean coding will allow your pages to present themselves well in all browsers. Even if you are great at HTML, it's always a good idea to use an HTML validator. Even veteran webmasters make mistakes sometimes. A good HTML validator that I like to use is CSE HTML Validator Lite, which can be downloaded for free.

Validating your pages can be very frustrating at first. The validator may tell you that you have 50 errors, which would be enough to make anyone want to pack it in. But validators are stupid. If you have one nesting error, it can throw off your whole page and the validator will give you a page full of errors. Fix your errors one at a time, starting at the top, and revalidate after each one. The most common errors that I've found are nesting errors (for example, this: <CENTER><H1>Header</CENTER></H1> is wrong. It should look like this: <CENTER><H1>Header</H1></CENTER>) and missing closing tags like </FONT>. Be on the lookout for these types of things.

Once your page is free of HTML errors, you're ready to move on to the next step...

All non-textual items on your page should have alternative content. For example, in every <IMG> tag, you should use the ALT attribute. It's not enough to put it ALT="filename.gif" or the file size -- the ALT attribute should describe what it is that your your visitors should be seeing. For example, if you have a picture of yourself, the ALT attribute might read ALT="picture of me".

In addition, if one of your images conveys an important meaning that is too much to be described in the ALT attribute, you should add a descriptive link. A descriptive link is a letter D in brackets (like this: [D]) that is linked to a page where visitors will find a more thorough description of the image in question.

Images aren't the only thing that require alternative content. If you have a JavaScript on your page with a function that is important, you need to provide a <NOSCRIPT> alternative. For example (and this is something I've come across a lot), if you have a JavaScript dropdown menu that is used to navigate your site, you need to provide a text alternative or else anyone without a JavaScript enabled browser will not be able to get past the first page.

Colors can really add to a webpage -- they can make it look exciting and fun and just plain old attractive. However, when misused, they can also make it completely unreadable to some people. First of all, make sure that your text color contrasts with your background color so that the text can be easily read on the background. It's a good idea to define the background color of the page as a color similar to that of your background image, too, so that visitors who aren't loading graphics will still be able to read the text.

It's also a good idea to avoid using light text on dark backgrounds as much as possible. Some people find it very difficult to read light colors on dark colors (not to mention that they are often impossible to print).

Another important thing to remember when using colors is not to use them as the sole means of conveying a message. For example, don't say: "Follow the blue links to pages on my site and the red links to pages on my husband's site." Someone who can't see colors won't have the slightest idea what you're talking about. If you do want to use colors to convey a message, be sure to provide a text alternative.

If you use tables to lay out information in columns or rows (like in a spreadsheet), be sure to use headers for the table rows and columns. You create a header by using the <TH> and </TH> tags. This will make it possible to understand your table, even in a text-only browser.

In addition, if you have text that is laid out in parallel word-wrapped columns (like in a newspaper), be sure to provide a linear alternative (a version that's laid out as regular text, down the page).

Some people really like frames, because they can make it easy to navigate your site and even easier to update it when you add new pages. However, frames can also be an obstacle to the disabled and to those with text-only browsers. Always provide a no-frames alternative to your page. You can use <NOFRAMES> tags in your frameset, but if all that you have in the NOFRAMES section is something like "You need frames to view this site", that's not enough. Your site needs to be completely accessible without the use of frames. So in your NOFRAMES section, you can put, for example, a site index, which provides links to all of the pages that would normally appear in the main frame.

When making web pages, keep in mind that HTML was created as a means of conveying information and not as a way to make the information look nice. We all know tricks that allow us to use HTML to make our pages look great, but some of these tricks can be confusing to those with text-only browsers. For example, a lot of people use <BLOCKQUOTE> tags to get the text away from the edges of the screen. This is not the correct way to format your pages and it will make anything in the <BLOCKQUOTE> tags look like a quote to those with non-graphical browsers. The best way to lay out your pages is by using CSS (Cascading Style Sheets), but because CSS is not equally supported by all browsers, for now, the next best alternative is to use tables. So if you want to get your text away from the edges, for example, instead of using <BLOCKQUOTE>, use <TABLE BORDER=0 WIDTH=90%> and put it in <CENTER> tags.

Another example of poor usage of HTML tags is using <UL> tags to format a page with a bordered background. <UL> tags are meant to be used for unordered lists. The proper way to deal with a bordered background would be, again, by using a table.

One more point about using proper tags... Note that <H1>, <H2>, <H3>, etc. tags are meant for headers. Don't use these tags to create bold text (use <B>). And when you do use header tags, be sure to correctly nest them. The main heading should be <H1>, the next heading should be <H2> and so on.

In a graphical browser (IE, Netscape, etc.), links are normally clearly marked and it is easy to tell one apart from another. In a text-only browser, this isn't always the case. Links that are adjacent can run together and look like one long link. To prevent this, avoid using links with nothing (an image, brackets, etc.) between them. <BR> and <P> tags are not enough. If you want your links on separate lines, try using an ordered or unordered list and preceding each link with an <LI> tag. Using brackets as I have used at the bottom of this page is effective, as well (note that the brackets should not be part of the link). If you have images side by side that serve as links, try using a table or even putting a small, transparent image between them.

You want your pages to be accessible to the disabled, right? Well, if you use browser-specific coding, they might not even be completely accessible to all abled people. It's always a good idea to check your pages in both IE and Netscape. In my opinion, though, that's not enough. Try checking them in a text-only browser, like Lynx, as well. Lynx is available for download someplace (I have a copy, though I can't remember where I got it). If you don't want to download yet another browser, though, here's an alternative suggestion. At AnyBrowser.com, you can check your pages for compatibility with a number of browsers and standards, including text-only and WebTV (WebTV also has a viewer for download if you'd like to regularly check your pages to see what they look like on WebTV). have found this resource to be invaluable -- I especially like the way it checks pages at a number of different HTML standards for text-only purity.

Now you're ready to run your page through the Bobby validator to find out if it's really Bobby compliant. You can do download Bobby at http://www.cast.org/bobby/ (or you can use the online validator at the same URL). At this point, you shouldn't have any errors, but if you do, Bobby will tell you what needs to be fixed. However, just because your page passes the Bobby validator, that doesn't mean that it's compliant. You need to do the manual checks, as well (Bobby tells you about these in the validator results). There are some things that Bobby just can't do. For example, if you use frames, Bobby can tell if you have a NOFRAMES section, but it can't see what's there -- it will have no idea whether or not your site is accessible from the NOFRAMES section. If it isn't, it isn't compliant. Bobby also ignores JavaScript, so if you have only JavaScript dropdown menus for navigation, Bobby will still pass your site. Again, that doesn't mean that it's compliant.

Though my own pages are compliant, I regularly read and reread the Bobby standards and revalidate my pages. I occasionally find something that isn't really 100% compliant and needs to be fixed. Putting a Bobby icon on your page isn't a status symbol -- it's a symbol of dedication to making the Internet accessible to the disabled. This is an ongoing commitment, not something that ends once you've run your pages through the Bobby validator just one time. Good luck and, once again, if you run into trouble, please feel free to contact me.


Back to Internet and the Disabled