Designing Accessible Web Pages

Calling all Web designers! Surely you want to give your audience the same thing that you want as a Web user: effective and efficient navigation to the most useful information on your pages. And the way you design your site will have a direct impact on how accessible it is to those who surf your pages.

At UIC, your target audience probably includes faculty, staff, and current and prospective students, not to mention outside faculty, parents, and many others. You should keep in mind that such a diverse audience will include people with disabilities; people without fast Internet connections, big monitors, or the latest technology; and people who use mobile computing devices.

When designing a Web site, keep this goal in mind: creating a Web site that allows for the effective and efficient navigation of information on your pages by everyone who surfs the site. Because many different people will surf your pages, the way you design your site has a direct impact on how accessible it will be for them.

While reading this article, consider your current Web site or a site you frequently surf. Is the site accessible? If not, how would you make it accessible? Read on to find out! And after you make your site accessible, enter it in the university-wide Web accessibility contest. (See UIC Web Accessibility Contest .)

Creating a Web site is quite easy. Hypertext Markup Language (HTML) is used to create the page. HTML is a set of tags, or codes, that describe how the information is to be presented on the page. Although some developers enter HTML codes manually as they create a page, people who are less familiar with HTML may use a "What You See Is What You Get" (WYSIWYG) editor. On our campus, Dreamweaver is frequently used for this purpose. However, for the most part, it doesn't matter what you use to create a Web site. It's the way you design your Web site that is critical!

How many Web pages do you surf on a daily basis that are difficult to read and confusing? Chances are you have come across many pages that have not been designed with accessibility in mind, allowing visitors to be able to locate information and content in an effective and efficient manner.

Accessible sites are especially vital for people with disabilities. As Tim Berners-Lee, World Wide Web Consortium (W3C) director and the inventor of the World Wide Web, says, "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." (From the W3C's Web Accessibility Initiative (WAI) page: http://www.w3c.org/WAI/)

There are several legislative mandates or factors specific to Web accessibility and/or institutional responsibilities in providing access to all students. These include: Sections 504 and 508 of the Rehabilitation Act of 1973, the Americans with Disabilities Act, and Section 255 of the Telecommunications Act. California, New York, and Texas are among the states that have published access policy documentation. Refer to http://www.w3.org/WAI/References/Policy#US for more information.

Web accessibility is also being emphasized and implemented in higher education. The University of Wisconsin-Madison has just adopted a Web access policy; you can obtain specific information at: http://www.wisc.edu/wiscinfo/policy/wwwap.html

In August, Walter Edelberg, an associate professor in the Department of Philosophy, created a text version of the department's Web page after being notified that the home page on their site was inaccessible. At that time, most of the links on the Department of Philosophy home page were clickable areas within an image map, leaving all the information about courses and similar offerings completely inaccessible to students using screen readers.

Walter made several improvements to the design and style of the department's Web pages in order to improve access. He cited a number of vital reasons for achieving Web accessibility, including the following: "(1) Making your department's Web site accessible is in your department's interest: you will reach a wider audience. (2) It is unfair to deploy education materials (including information on your department) that are inaccessible to some students, when those materials could be made accessible to all without too much trouble. (3) It conforms to federal laws. (4) Users without disabilities also benefit: the accessible site loads faster and it's easier for everyone to use."

I asked Walter about the greatest benefit of knowing about Web accessibility. He replied, "Before learning about 'Web accessibility,' I didn't know that software screen readers and Braille displays are available to help make Web content available to people with disabilities. Now I know that if we do our part, our department Web site can be used with these devices. Knowing about Web accessibility has also helped me to design course Web sites that are cleaner and easier for everyone to navigate."

You're probably wondering how long it will take to make your Web site accessible. It took Walter only one afternoon to create an accessible version of the department's 63-page site. The approach that Walter used was to "deploy two versions of our Web site: the original one (with graphics), and an accessible version (text only). A link near the top of the graphics version takes users to the text-only site. To make the text-only pages, we simply copied the entire site to a new folder, then removed images and background graphics from the copied files. We added a site map to the accessible version to make it easier for all users to navigate."

At first, it took Walter some time to become accustomed to making changes on both versions when updating the site. By now, though, Walter says that it's becoming routine. So it does not necessarily need to take a long time to make an inaccessible site accessible. Furthermore, keeping Web accessibility guidelines in mind as you work will help you to design a site from the beginning that will provide you ultimate access from the start.

The Department of Philosophy's text-only pages are being used. The department uses the Webalizer program on tigger (http://www.accc.uic.edu/webpub/webalizer.html) to track the number of hits and users. Walter stated, "In November 2000, we had a total of 1413 hits on our six main section home pages. Of these, 13 percent were on the accessible versions of the pages. For the undergraduate section, that figure jumps to 28 percent."

For additional information about designing acessible Web pages, see: http://www.accc.uic.edu/webpub/webaccess.html

The following recommendations will provide you with ideas to make your Web site accessible:

• Add descriptive ALT text tags to all graphic images. ALT text tags allow a person using a screen reader to obtain a better understanding of the Web page's content. In most browsers, the ALT text also appears in small window when the mouse cursor is placed over the image.
  
  
• Use appropriate descriptions for hypertext links. Avoid using "click here" without providing information about why the link is important. Descriptive link text is also good for the Web search engines that categorize pages by the text with which they are linked.
  
  
• Provide a site map to alleviate confusion among your various Web pages.
  
  
• Provide column headings, table headers, and a table summary if you use tables. Keep in mind that tables, if not designed correctly, can be very difficult to understand for people using screen readers.
  
  
• Stay away from frames -- they do not have the necessary level of access.
  
  
• Use cascading style sheets (CSS) to ensure that Web pages that are similar in structure are also similar in appearance. Web pages that have a consistent layout are easier for everyone to navigate efficiently. The key here is to ensure that the page's style offers good organization.
  
  
• Create Web pages using "relative" font sizes. This will allow the user to access the site with their own browser settings.
  
  
• Choose text colors that provide enough contrast from the background color and vice versa, so that the text is easy to read.
  
  
• If the initial page in your Web site is not as accommodating as it could be, create a text-only version of it. The link for the text-only version of the page should be located near the top of the Web page. Ideally, however, your initial page should be accessible enough that a text-only version won't be necessary.

• Provide essential material on your initial (home) page.
  
  
• Avoid placing too much information on any one page.
  
  
• Set your pages up so that the user will not need to perform multiple mouse clicks to get to basic material and will not need to navigate from one end of the screen to the other repeatedly.
  
  
• Avoid using abbreviations, or be sure to type the information out, followed by the abbreviation.
  
  
• Use correct HTML code and validate the code.
  
  
• If you decide to use additional media (audio, video, graphic, etc.), make the information it contains accessible in an alternative form.

To assist you with the process of designing accessible sites, the World Wide Web Consortium (W3C) has created the Web Access Initiative (WAI) guidelines. The latest Web Content Accessibility Guidelines (Version 1.0) were released in May 1999 and can be found at:

http://www.w3.org/TR/WCAG10/#Guidelines

The W3C WAI guidelines take into consideration the needs of your visitors and the manner in which they access the Web. Good Web design will incorporate access to Web pages for those using different agents or platforms -- i.e., computer, phone, etc. -- and operating within different environments -- loud, visually restrictive, etc.

http://www.w3.org/TR/WAI-WEBCONTENT/

When you're first starting, the W3C WAI guidelines might be a bit overwhelming. In that case, you might prefer the W3C Web Access Initiative's ten "Quick Tips" listing fundamental considerations for accessible Web pages:

http://www.w3.org/WAI/References/QuickTips/#QuickTips

You can also contact Joy Hyzny from the Office of Disability Services at 312-413-0886 for further details.

People with disabilities frequently use assistive technology products. These products are designed to provide a method for performing a specific activity. The assistive technology products designed specifically for computer access include: screen magnifiers and readers for people with visual disabilities; alternative input devices, ergonomic mouse options, and voice recognition for people with physical disabilities; and touch screens for people with cognitive disabilities. This is by no means an all-inclusive list.

These products provide people with disabilities an avenue to access the computer. Unfortunately, however, no available technology can intuitively interpret the various aspects of Web page design.

For people with limited vision, there are software programs that will magnify information on the computer screen. ZoomText is one such program. It provides options that allow the user to customize the amount of magnification he or she needs.

A major factor in Web design that hinders access when using screen magnifiers is the organization of the page. When people with visual disabilities surf your page using a screen magnifier, they will only have a partial view of what each page actually looks like. They will thus be at a disadvantage if your pages require an overall view to understand them. Headings, lists, consistent structure, and, in particular, the use of the same cascading style sheets for each page's layout and style will help organize your pages.

A repetitively structured site will provide people using a screen magnifier -- or people with small monitors -- with the necessary tools to know what to expect when linking to the next page. Consistency is a good thing!

By using appropriate hardware (a speech synthesizer) and a software program (a screen reader), people with visual disabilities can listen to information on the Web page as it is read aloud. Window-Eyes and JAWS are two commonly used screen readers.

One of the major factors that contribute to poor Web access when using screen readers relates to graphic images. Screen readers read basic text. Therefore, graphics that do not contain an ALT text tag will not be read. The ALT tag provides the screen reader with textual information about the graphic image. This is vital if there is a link within the graphic. If no ALT tag is present, the user will have no idea that the link exists, denying them access to essential information.

It is extremely easy to add an ALT tag in either Dreamweaver or basic HTML. If you have a graphic image that displays "LogIn", for example, an appropriate HTML code you can use to include it might be something like:

<IMG SCR="loginphoto.jpg" ALT="LogIn">

In Dreamweaver, you can indicate the ALT text by clicking on the image and typing the text in the Alt field in the Properties inspector box. (Select View->Properties to open the Properties box.)

Another major consideration when designing Web pages for use with screen readers is to understand that a screen reader reads information line-by-line, from left to right, just like we do when we read standard text out of a book. It is easy to get confused when a screen reader reads Web pages with rows and columns.

Whenever you use a table in a Web page, consider designing it with the rows as columns (that is, order the information from left to right instead of top to bottom) to ensure greater access and understanding of the table when it is read by screen readers. Providing headers and a summary of your table is another way to make your table more accessible.

Frames and drop down menus are also problematic for people using screen readers. Although the WAI provides some ideas for using frames, the accessibility is still low whenever you them. And remember that frames cannot be bookmarked. Therefore, Web page designers should avoid frames at all cost.

There are accessibility features built in to Windows 95, 98, and 2000, as well as in various Web browsers. Internet Explorer (IE), for example, has numerous settings that allow for greater access.

For more information about Internet Explorer's accessibility features, select Help from the Internet Explorer menu bar, then Index, then Disabilities, Access for. For information on Windows accessibility features, click Start, then Help. Click on the book icon beside How To to expand the How To menu, and browse the Set Up Windows Accessibility Features menu.

There are several specific ways to check your page for accessibility. A couple of common programs allow the Web page designer to type in their Web address (URL) and perform a check based on the W3C WAI guidelines.

Bobby:

http://www.cast.org/bobby

is most commonly used for this. UsableNet's LIFT:

http://www.usablenet.com

is another program that can be especially helpful in identifying and resolving accessibility issues.

These programs will not do everything for you; they overlook many accessibility features. For example, they cannot examine the page's overall organization.

As part of your Web page evaluation process, it is a good idea to view it in a text-only browser such as Lynx or by turning off the graphics in Internet Explorer or Netscape. It is also helpful to view your page using several versions of both Internet Explorer and Netscape to ensure maximum access.

For example, here's how to check your page using Internet Explorer.

First, open your page in Internet Explorer and examine it to make sure you know where all the graphics are. Then, when you are ready to turn pictures off, select Tools->Internet Options->Advanced, scroll down to Multimedia, and uncheck Show Pictures. Click the OK button and Refresh your display. (Click the Refresh icon -- two arrows on a sheet of paper -- or select View->Refresh.) The page will now appear without pictures.

There are additional Multimedia features that you can select to get a better idea of how your page will be read by a screen reader. Go back to Tools->Internet Options->Advanced->Multimedia. Make sure that the following boxes are not checked: Play Animation, Play Videos, Show Image Download Placeholders, Smart Image Dithering, in addition to Show Pictures. Now check your page again.

You can also try using the Tab key to navigate your pages and obtain a better sense of how screen readers navigate. Using tabs is the only way to move around in a text-only browser. If you've never used one, log into your icarus or tigger account and try it. Enter: lynx your.page.uic.edu
You should find it instructional.

Follow these steps with several of your Web pages.

• W3C's Web Accessibility Initiative: http://www.w3.org/WAI
  
  
• UIC Office of Disability Services: http://www.uic.edu/depts/counselctr/disability/diswebpg.htm
  
  
• A-Prompt: http://aprompt.snow.utoronto.ca
• Bobby HTML validation program: http://www.cast.org/bobby
• Do-It World Wide Access: Accessible Web Design (1997, 2000). University of Washington: http://www.washington.edu/doit
• Making Educational Software Accessible: Design Guidelines Including Math and Science Solutions: http://main.wgbh.org/wgbh/pages/ncam/
  (A software program to synchronize text with A/V or pictures, etc. WGBH in Boston and funded by Trace Center.)
• The National Center for Accessible Media: http://main.wgbh.org/wgbh/pages/ncam/webaccess/index.html
• Trace Research and Development Center: http://www.trace.wisc.edu
• UsableNet's LIFT: http://www.usablenet.com
  
  
• Powell, T. A. 2000. Web Design: The Complete Reference. Osborne-McGraw-Hill: Berkeley.
• Paciello, Michael G. 2000. WEB Accessibility for People with Disabilities. CMP Books: Lawrence, Kansas.

If you are interested in more information, in a potential Web accessibility class, in help with reviewing your page using assistive technology products, or in the availability and use of assistive technology at UIC, please contact Joy Hyzny in the Office of Disability Services at 312-413-0886.

Also look for additional articles on this subject in future issues of the A3C Connection.

Comments are welcome; please send them
to Joy Hyzny, jhyzny1@uic.edu