Making an Accessible Website

"Accessibility" refers to how well a website can be accessed and understood by the range of Web users. This page contains specific suggestions for increasing the accessibility of a Web site.

A universally accessible website...

• Loads quickly.
• Is viewable and functions well using different browsers, monitors of different sizes and color depths, and multiple operating systems.
• Is available for people with disabilities.
• Can be understood by people with various levels of knowledge about a topic or technical expertise and by people from different cultural backgrounds.

 

Two good ways to ensure accessibility:

1. Follow the Web Content Accessibility Guidelines of the World Wide Web Consortium.
2. Use a tool to check the accessibility of your Web pages, such as the free HTML validation service from the World Wide Web Consortium at http://validator.w3.org/. Enter in the address of your Web page and press the "submit" button.

Selected Web Content Accessibility Guidelines:
The four guidelines listed below have been selected from the World Wide Web Consortium. For a complete list and detailed explanation of all fourteen guidelines, see the Web Content Accessibility Guidelines from the World Wide Web Consortium.

1. "Provide equivalent alternatives to auditory and visual content."
Each of the multimedia materials you use, including images, video, sound clips, scripts, applets, plug-ins, graphs, and charts need a text alternative to be provided. How is this done?

• For all images, graphics, and animation: In the HTML of your site, use the "alt" tag after each "IMG" tag used to provide a description of the image, graphic, or animation. If necessary, provide additional descriptions by using either a description link or the "longdesc" tag. This stands for "long description" and should be used whenever there is more information conveyed than a simple "alt" tag is able to explain.
  
  • To add an "alt" tag in Microsoft FrontPage:
    Select the image and then go to the "Format" menu and select "Properties." Select the "General" tab and then type in a short description in the "text" field. Click "OK."
    
  • To add an "alt" tag in Adobe Dreamweaver:
    Select the image and then type a description of the image into the "Alt" field of the "Properties" window.

For help using alt tags, visit the W3C section on Images from HTML Techniques for Web Content Accessibility Guidelines.

• For all multimedia: Provide captioning and transcripts of audio and video. (For more information, see the Audio and Video section of HTML Techniques for Web Content Accessibility Guidelines).

2. "Don't rely on color alone."
All text and graphics should carry the same meaning when viewed without color. For this guideline:

• Avoid using shades of color that are too similar for text and background.
  
• Use shape or text as well as color to convey information.

3. "Clarify natural language usage."
Always use HTML language tags to identify what language your page is in. Any time you change the language, even if only for a word or a phrase, it should be identified. See the Language Information section of HTML Techniques for Web Content Accessibility Guidelines to learn how and why this is done.

4. "Provide clear navigation mechanisms."
Page and site navigation is essential to an accessible site.

• Write good text links: Always let the user know where a link is going to lead them. Avoid using "click here" and instead provide information on where the link leads and what information will be found there.
• Include a site map or table of contents: Provide a clear and detailed outline of your site's organization.
• Use consistent navigation. Provide navigation bars that look the same from page to page.
• Provide searching options. This is most important for larger websites.

 

Additional ways to increase accessibility:

• Limit the file size for faster downloading speeds.
  Optimize all graphics before using them on your website. See our pages on Working with Images for optimization instructions.
  
  
• Add additional languages to your site.
  Consider providing translations of some or all of your Web site into another language.
  
  
• View your pages using different browsers, monitors of different sizes and color depths, and multiple operating systems (before publishing them if possible).
  Try it yourself or ask a friend to view your Web pages, noting differences in the images, fonts, colors, and downloading speeds on...
  • PC vs. Macintosh.
  • Windows vs. UNIX.
  • Netscape Navigator vs. Internet Explorer.
  • Monitors of different resolutions.
  • Ethernet/DSL/cable modem vs. regular modem connections.

 

Links to Accessibility Resources