Visit the new ACCC website! (beta)
ACCC Home Page Academic Computing and Communications Center  
Accounts / Passwords Email Labs / Classrooms Telecom Network Security Software Computing and Network Services Education / Teaching Getting Help
 

Designing Accessible Web Pages

 

Calling all Web Designers! Surely you want to give your audience the same thing you want as a Web user: effective and efficient navigation to the useful information on your pages. The way you design your site will have a direct impact on how accessible it is to those who surf your pages. At UIC, this probably means faculty, staff, and current and prospective students, not to mention outside faculty, parents, and lots of others. Such a diverse audience will include people with disabilities; people without fast Internet connections, big monitors, or the latest technology; and people with mobile computing devices.

 
     
 
     
The Accessibility Goal
 

When designing a Web site, keep this goal in mind: to create a Web site that allows for effective and efficient navigation of information on your page. As indicated above, many people will be accessing your site and the way you design your site will have a direct impact on how accessible it is to those who surf your page.

While reading this article, consider your current Web site or a site you frequently surf. Is the site accessible? How would you make it accessible? Read on to find out!

 
     
Creating Web Pages
 

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!

 
     
The Importance of Web Design
   
     
-- Access to All
 

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. The main idea as you design your Web pages should be to allow your 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/).

 
     
-- Legislation
 

There are several legislative mandates or factors specific to Web accessibility and/or institutional responsibilities to provide 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. For more information, refer to: http://www.w3.org/WAI/References/Policy#US

Web accessibility is 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

  
     
Making Your Web Page Accessible
 

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

  
     
-- Web Access Essentials
 
  • Add descriptive ALT text tags to all graphic images. ALT text tags will allow a person using a screen reader to obtain better meaning of the Web page.

  • For hypertext links, use appropriate descriptions. Avoid using "click here" without providing information about why the link is important.

  • Provide a site map to alleviate confusion on your Web pages.

  • If you use a table, provide column headings, table headers, and a table summary. 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 size. 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.
  
     
-- Additional Tips
 
  • Provide essential material on your initial (home) page.

  • Avoid placing too much information on any one page.

  • Make good use of white space.

  • Set your pages up so that the user will not need to perform multiple mouse clicks to get to basic material and so that the user 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.
  
     
W3C Web Accessibility Initiative
 

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, phones, etc. -- and operating within different environments -- loud, visually restrictive, etc: http://www.w3.org/TR/WAI-WEBCONTENT/

  
     
-- W3C Quick Tips
 

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.

  1. Images & animations: Use the alt attribute to describe the function of each visual.

  2. Image maps: Use client-side MAP and text for hotspots.

  3. Multimedia: Provide captioning and transcripts of audio, and descriptions of video.

  4. Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."

  5. Page organization: Use headings, lists, and consistent structure. Use Cascading Style Sheets (CSS) for layout and style where possible.

  6. Graphs & charts: Summarize or use the longdesc attribute.

  7. Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.

  8. Frames: Use NOFRAMES and meaningful titles.

  9. Tables: Make line by line reading sensible. Summarize.

  10. Check your work. Validate. Use tools, checklist, and guidelines located at http://www.w3.org/TR/WCAG.

© W3C

These tips were produced by the W3C's Web Access Initiative; they are on the Web at the URL: http://www.w3.org/WAI/References/QuickTips/#QuickTips

Or contact Joy Hyzny from the Office of Disability Services by telephone at 1-312-413-0886 or by email at jhyzny1@uic.edu.

  
     
-- W3C Accessibility Guidelines
 

While designed to facilitate the negotiation of Web pages by people using assistive technologies, the W3C's accessibility guidelines describe essential aspects of negotiating Web pages for all people, with or without a disability.

The W3C's fourteen guidelines for accessible Web pages are as follows:

  1. Provide equivalent alternatives to auditory and visual content.

  2. Don't rely on color alone.

  3. Use markup and style sheets and do so properly.

  4. Clarify natural language usage.

  5. Create tables that transform gracefully.

  6. Ensure that pages featuring new technologies transform gracefully.

  7. Ensure user control of time-sensitive content changes.

  8. Ensure direct accessibility of embedded user interfaces.

  9. Design for device-independence.

  10. Use interim solutions.

  11. Use W3C technologies and guidelines.

  12. Provide context and orientation information.

  13. Provide clear navigator mechanisms.

  14. Ensure that documents are clear and simple.

© W3C, from: http://www.w3.org/TR/WCAG10/#Guidelines

Click the links above for details about each guideline.

 
     
Navigating a Web Page: Perspective From a Surfer With a Disability
 

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 by no means is an all-inclusive list.

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

 
     
-- Visual Disabilities -- Screen Magnifiers
 

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 that will be used.

Overall Structure of the Page

A major factor in Web design that hinders access when using screen magnifiers is the organization of the page. When a person with a visual disability surfs your page using a screen magnifier, they will only have a partial view of what each page actually looks like. They will 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.

If a person using a screen magnifier surfs more than one page, a repetitively structured site will provide them with the necessary tools to know what to expect when linking to the next page. Consistency is a good thing!

 
     
-- Visual Disabilities -- Screen Readers
 

Using appropriate hardware -- a speech synthesizer -- and a software program -- a screen reader -- a person with a visual disability can listen to information on the Web page as it is read aloud. Window-Eyes and JAWS are two commonly used screen readers.

Graphics and the ALT Tag

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 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.)

Reading Tables

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

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 use frames. And remember that frames cannot be bookmarked. Therefore, Web page designers should avoid frames at all cost.

 
     
-- Additional Accessibility Features
 

There are accessibility features built-in to Windows 95, 98, and 2000, and also in Web browsers. Internet Explorer, for example, has numerous settings that allow for greater access.

For more information about Internet Explorer's accessibility features, select Help from 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 expand the How To menu, and browse the Set Up Windows Accessibility Features menu.

  
     
Testing Your Page
 

There are several 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, but I recommend that you also use another program that can be helpful for correcting accessibility problems. 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 access items. For example, they cannot examine the page's overall organization.

  
     
How Accessible Is My Web Page?
 

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 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 IE 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.

Also try using the Tab key to navigate your pages to have 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.

 
     
Resources
   
     
-- For More Information
 

If you are interested in more information, a potential Web accessibility class, or in reviewing your page using assistive technology products, please contact Joy Hyzny from the Office of Disability Services by telephone at 1-312-413-0886 or by email at jhyzny1@uic.edu.

 

2002-6-17  Office of Disability Services
UIC Home Page Search UIC Pages Contact UIC