ITSS WebDev Guide

What is meant by "Web Page Accessibility?"

Accessibility refers to a page being "viewable" by anyone regardless of their physical or mental conditions. If someone is visually impaired, he or she should still be able to get the information from your page. They are responsible for having the text enlarging software or the text-to-speech converters, but the document's author (this means you) should present the information in a way that works with this hardware/software.

I like to broaden the definition of "accessible." I like to inlude the entire Web community. Take into account the end user's connection speed, monitor size and cpu muscle. Think about those who don't have the latest browser and those who use adaptive software like a screen reader. Consider the end user in all aspects. If a page is designed asking all of these questions you'll find it is not that difficult to make. The best part is it will actually improve the page for everyone.

How do I make a Web Page accessible?

Fortunately, the W3C has worked hard to make our lives easier. With the adoption of HTML, CSS 2 and the release of the 5.0 and later compliant (or mostly compliant) browsers, we can do a great deal quite easily.

First, let's answer this question:

HTML (HyperText Markup Language) is meant to define a page's structure - how it's laid out, etc. For example this page has a main header called "ITSS WebDev Guide." It's purpose is to announce the main concept of the page. The HTML tags with text are:

<h1>ITSS WebDev Guide</h1>

There are six levels of headers and the main header is always <h1></h1>. The header level below that is <h2></h2> and it's around the text headers "What is meant by Web Page Accessibility" and "How do I make a Web Page accessible?" If I were going to have another section inside "How do I make a Web Page accessible?" I would use header level 3. This may seem obvious to many, but we often used the header tag to change the font size of headers until they looked good. For people without visual impairments this made no difference. They saw a nice looking page and went on. The specialized software used by those with visual impairments depends on the proper use of the header tag to indicate the structure of the page. This way the user knows where he or she is at conceptually.

With HTML 4.01 and CSS 2 we can make structurally sound web pages and control font size. This benefits all viewers and gives additional control of the look of the page to the author.

So how does a person make a Web Page accessible? Use HTML for the structure of the page and CSS for the style and look of the page.

I think I've made an accessible page, but how do I know?

Fortunately many Web page validators are available to use on the Web at no cost. One validator is called "Cynthia Says." Type in the URL of the page you want validated and Cynthia will take care of the rest. You will get a report on how your page does against accessibility checkpoints.

What about broad accessibility?

This is not difficult, either. Take the time to look at your page with older technology. This should be a combination of software and hardware.

Keep older versions of the browsers on your computer. For example, I currently develop my pages in Mozilla 2.x and verify with Navigator 4.x and 7, Internet Explorer 5 and 6. I also check these browsers on both Mac OS and Windows. I'll add newer versions of the browsers as they come out. I'm not going to tell you the pages look the same in each browser or platform because they don't. The objective is to "gracefully degrade" as you move to a browser with more limitations (such as Netscape 4.x or Lynx). The page should still be fully functional.

Connection speed is definitely a issue. Many users still use dial-up modems. This is all their local ISP (Internet Service Provider) offers. How many lifetimes do you want them to wait to load your page? Have a regular dial-up account at home to log on and try your pages, or try your page from somebody who has a dial-up modem. It can be a really rude awakening sometimes. Also try to have a slower computer that you can view your pages with. That cool flying airplane may look like it's ready to crash and burn on an older system. Give good thought to what kind of experience you want for your intended users.

"alt" attributes for images are really helpful. Make sure they convey what a sighted person is supposed to understand from looking at the image, and be sure to use the "alt" attribute. Specify the size of your image with the "height" and "width" attributes. Many current web editor programs do this for you automatically when you insert the image in your page.

Links to other resources

For more information on Web Page Accessibility, please visit ITSS Web Design References: Accessibility.

Rev: bdr 11.06