Montgomery College - Home

Designing Your Website for Accessibility

Why Accessibility?

An estimated 500 to 700 million people worldwide have disabilities. Our population worldwide is aging, resulting in vision & hearing changes, and changes in dexterity & memory. Other web visitors have additional differences to consider. Many people:

  1. Cannot see graphics because of visual disabilities (blind/low vision or colorblind); may need large print options, voice output browser or high contrast colors. In the USA, approximately 10.4 million people (about 4 percent) have low vision or are blind. Approximately 8-10% of the male population and about 0.6% of the female population experience some form of color deficiency.

  2. Cannot hear audio because of a hearing loss. Approximately 22 million Americans (8.2%) report some level of hearing loss; 2.4 million report a severe loss.

  3. Have difficulty navigating sites that have poor organization, confusing directions or distracting images due to cognitive or neurological disabilities, such as learning disabilities, ADHD, seizure disorders, other developmental disabilities or are younger than the average user

  4. Cannot use a mouse to navigate due to physical or visual disabilities, thus use keystrokes. Approximately 120 million people worldwide.

  5. Speak, write and/or understand English as a Second Language (300+ million worldwide)

  6. Use handheld and wireless devices

  7. Use slow connections and modems or older equipment that cannot download large files

The "Electronic Curb-Cut Effect"

Designing products for accessibility opens possibilities for everyone. Sidewalks with curb cuts are simply better sidewalks. Innovations developed by, or in support of, people with disabilities that became "electronic curb-cuts" have benefited us all. Consider the Internet Electronic Curb-cuts of the 1990's.

Top

User Experiences and Disability Simulations:

  1. Screen Reader Simulation
  2. Low Vision Simulation
  3. Color Blindness Simulation
  4. Motor Disabilities Simulation: Try opening a Web browser and finding specific information using only the keyboard, without the mouse.
  5. Cognitive Disabilities Simulation: Or, try rotating your mouse 180 degrees, with the buttons facing you. Navigate for a minute on the Web. Or, try using the mouse with your non-dominant hand.
  6. Cognitive Overload Sample
  7. Examples of less than fully accessible sites: (go to "Preferences" or in IE 6.0 "Internet Options" "Advanced" and turn off images and scripts, then view)

Top

Legal Mandates and Sources of Assistance:

  1. Section 504 of the Rehabilitation Act of 1973 - Department of Justice, Rehabilitation Act
  2. The Americans with Disabilities Act (ADA) of 1990 - Department of Justice, ADA Home Page
  3. 1996 Department of Justice ruling - ADA accessibility requirements apply to Internet resources
  4. The World Wide Web Consortium (W3C) - develops the common protocols to promote universal access
  5. W3C's Web Accessibility Initiative (WAI) lists guidelines for web access
  6. Section 508 Standards - 2001 for electronic and information technology
  7. Montgomery College Web Standards
  8. Institutional Coordination and Reform (or "How to get people to make their Web content accessible"). A tutorial, including "The 8 Steps Toward Institutional Reform."
  9. Examples of institutional web accessibility policies
    View the University of Minnesota's Web Accessibility Standards

  10. All standards require web developer judgment

Top

Designing for Accessibility is Good Page Design!

A recent self-assessment of the Montgomery College department and faculty websites revealed that most of the access problems could be easily solved by:

  1. using better general design principles,
  2. providing "ALT" tags for graphics, and
  3. improving TITLE tag, link and frame descriptors.

A sample "disaster" page.

See also WebAIM's "How-to and tutorial" related to Graphics, Forms, Dreamweaver, FrontPage, PDF, Powerpoint, Multimedia and more.

General Design:

  1. Use a simple, consistent page layout throughout your site.
  2. Use enough contrast. Keep backgrounds simple.
  3. Design options large enough.
  4. Avoid flashing elements; they can cause seizures. Avoid annoying animations.
  5. Provide alternatives for marquees.
  6. Use ordered (numbered) lists when possible.
  7. Use the TITLE tag in the HEAD to identify your page in user bookmarks and printed copies.

Graphics:

  1. Use "ALT" tags for graphical elements on your page.
  2. Use "ALT" tags for graphical representations of text.
  3. Use a NULL value for unimportant graphics.

Links:

  1. Make links descriptive so that they are understood out of context. For an example of a poorly-named link, click here.
  2. Use a descriptor for a link name, rather than a web address. Repeat the link name after the descriptor.
  3. Use bullets or separators between adjacent links to cause screen-readers to pause.
  4. "Front-load" lists with links.

Top

Advanced Topics

Navigation:

  1. Use frame titles with text that facilitates frame identification and navigation.
    http://www.AHEAD.org - page using frames for layout of header, menu, and content.
  2. Consider alternatives to frames.
  3. Provide a method to skip repetitive navigation bars and links. See example of "Skip Nav" link.
  4. Include menu alternatives for image maps to ensure that the embedded links are accessible.
    An accessible client-side image map is located on the Disability Support Services website at http://www.montgomerycollege.edu/
    Departments/dispsvc/dssrcamp.htm.
  5. Create a logical tab order through links, form controls, and objects.
  6. Provide keyboard shortcuts to important links.
  7. Provide a site map or table of contents.

Tables:

  1. Use the "Summary" attribute within the TABLE tag element.
  2. Identify row and column headers.
  3. Use the "TH" tag element for row and column headers.
  4. Link header information to rows and columns in tables.
  5. A in-depth discussion on making data tables accessible is available at the Architectural and Transportation Barriers Access Board Section 508 website.

Other:

  1. Provide audio description and transcripts of video.
  2. Provide alternatives for content in applets and plug-ins.
    For example, Disability Support Services provides all its intake forms in Adobe Acrobat (.pdf) format, some in (.doc) format as well, and states that hard copies and other formats, such as large print are available on request.
  3. Provide alternatives for forms and databases.
  4. Consider other options for making graphical features accessible.
    Some organizations with graphic-intensive Web pages provide a separate text version of their site to ensure accessibility. This adds a great deal of maintenance time and complexity as two versions of a site must be updated. It also segregates site visitors according to the type of equipment they use to access the Web. As much as possible, design a single version of your site so that it is accessible to all visitors.
  5. Javascript - many issues arise. Help is available at the W3C-WAI website. Ensure that pages are accessible with scripts turned off for browsers that don't support scripts. In in-depth discussion on making scripts accessible is available at the Architectural and Transportation Barriers Access Board Section 508 website.
  6. Web Captioning Tutorials. The most complete set of instructions you'll find anywhere for captioning with SMIL and SAMI for Real Media, Quicktime and Windows Media Player using MAGpie.
Top

Test Your Web Pages

  1. Use the Bobby Accessibility Checker available at http://www.cast.org/bobby/. Test on a variety of platforms (UNIX, Windows, MAC) and browsers (Netscape 3 & 4, IE 5, lynx). Bobby tests for accessibility and highlights nonstandard and incorrect HTML.
    http://www.cast.org/bobby/
  2. A-Prompt: Download this free PC software which tests your site for accessibility and usability, then guides you through any necessary corrections to your code.
    http://aprompt.snow.utoronto.ca/
  3. AccVerify Cynthia Says Edition: provides tests for conformance to Section 508 and W3C accessibility guidelines.
    http://www.icdri.org/test_your_site_now.htm
  4. WAVE 3.0 Web Accessibility Tool: The WAVE is a free online tool that facilitates human judgment in the accessible design process.
    http://www.wave.webaim.org/index.jsp
  5. Use Vischeck to test your website for accessibility with colorblind users.
    http://www.vischeck.com/vischeck/
  6. Web Accessibility Initiative tools, checklist, and guidelines.
    http://www.w3.org/TR/WAI-WEBCONTENT
  7. Section 508 Web Accessibility Checklist.
    http://www.webaim.org/standards/508/checklist
  8. Evaluation, Repair, and Transformation Tools for Web Content Accessibility.
    http://www.w3.org/WAI/ER/existingtools.html
  9. Alternative Web Browsing.
    http://www.w3.org/WAI/References/Browsing
  10. Lynx Viewer: See how your page looks when viewed with Lynx, a text-mode web browser.
    http://www.delorie.com/web/lynxview.html
  11. Opera: This compact browser for Windows 95/98/ME offers enhanced keyboard navigation and screen magnification.
    http://www.opera.com/index.html

  12. Get feedback about your website from people with disabilities.
  13. Use your judgment!

Top

Download demo assistive software to test web pages for accessibility:

  1. JAWS - JAWS is probably the most commonly used screen readers among people who are blind. It is not only used to access the Web, but also for complete computer control and navigation. JAWS is a very complex program with has a steep learning curve, but highly suggested for those who want to test their own Web content. (40-minute demo version; user must restart computer to reuse the demo).
    http://www.freedomscientific.com/
  2. IBM Homepage Reader 3 - Home Page Reader only reads Web content and basic text files. It is not used for complete computer control and navigation. It is much easier to use and learn than other screen readers, but also somewhat limited in functionality. HPR works great for demonstrating what a screen reader is and how it is used. (30-day trial version).
    http://www-3.ibm.com/able/solution_offerings/hpr.html
  3. Window-Eyes - a full-featured screen reader (30 minute trial version); also fairly complex and probably not for the casual non-blind user.
    http://www.gwmicro.com/demo/
  4. ZoomText Xtra - magnifies text for low vision users (free demo version available for download or on CD).
    http://www.aisquared.com/Products/
  5. Opera is a Web browser with screen enlarging functionality. A free, ad-supported version is available. Opera is a great tool because it is both very easy to learn and use, and it is free.
    http://www.opera.com/
Top

Resources

  1. W3C's Web Accessibility Initiative outlines the strategies and tools for creating web sites that are highly usable. "Getting Started: Making a Website Accessible" is an excellent place to start learning about these tools. Many of the slides used as examples in this page were from the Curriculum for Web Content Accessibility Guidelines 1.0 by Chuck Letourneau at Starling Access Services and Geoff Freed at the National Center for Accessible Media.
    http://www.w3.org/WAI/ and
    http://www.w3.org/WAI/wcag-curric/
  2. WebAIM - Web Accessibility In Mind: (Excellent source of information on web accessibility and solutions, including training)
    http://www.webaim.org/
    WebAIM's "How-to and tutorial" related to Graphics, Forms, Dreamweaver, FrontPage, PDF, Powerpoint, Multimedia and more.
    http://www.webaim.org/howto/
  3. Accessibility in Distance Education (ADE): (explains impact of accessibility in the online environment and provides information about different types of disabilities, relevant laws, and best accessibility practices)
    www.umuc.edu/ade
  4. Macromedia Accessibility provides information on creating accessible web content with Macromedia products.
    http://www.macromedia.com/macromedia/accessibility/
  5. Microsoft - Accessibility Technology for Everyone: "Empowering People Through Great Software"
    http://www.microsoft.com/enable/
  6. Adobe PDF Accessibility Tools: Adobe provides a tool that will convert your PDF into a readable HTML or text file.
    http://www.adobe.com/products/acrobat/solutionsacc.html
  7. WebCT Course Design and Accessibility provides concrete suggestions for making your online course accessible. Written by Glen Low, WebCT. Date: Sept. 19, 2001.
    http://www.webct.com/service/ViewContent?contentID=1790151
  8. Accessible Web Site Construction and Electronic and Information Technology Resource Center: links to many websites dealing with web accessibility issues from the International Center for Disability Resources on the Internet (ICDRI).
    http://www.icdri.org/WebAccess/web_site_accessibility_informati.htm
  9. "Web-based Intranet and Internet Information and Applications" from the Architectural and Transportation Barriers Access Board "Guide to the Section 508 Standards for Electronic and Information Technology - June 21, 2001," lists each 508 standard and provides technical assistance with clear examples on implementation.
    http://www.access-board.gov/sec508/guide/1194.22.htm
  10. Media Access Generator (MAGpie), for creating captions and audio descriptions for rich media
    http://ncam.wgbh.org/webaccess/magpie/
  11. Searchable database of Web Accessibility Resources (This is a large, continually growing database of sites all over the Web.)
    http://www.webaim.org/weblinks/
  12. Valle Verde Library - Designing Web Pages for People with Disabilities : (Excellent listing of resources on general information, legal issues, design issues and testing your web site for accessibility)
    http://www.epcc.edu/vvlib/webada.htm
  13. Trace Research and Development Center provides resources for the design of accessible Web pages including applet and plug-in features.
    http://www.trace.wisc.edu/
  14. America Online Accessibility Policy - AOL's commitment to the development of products and services that are accessible to all users, including those with disabilities.
    http://corp.aol.com/access_policy.html
  15. "Distance Education: Access Guidelines for Students With Disabilities," California Community Colleges, 8/1999
    http://www.htctu.net/publications/guidelines/distance_ed/disted.htm
  16. More information and resources on web access, assistive technology and disability-related topics are available at the Disability Support Services website at http://www.montgomerycollege.edu/Departments/dispsvc/.
Top

Visit the Montgomery College Disability Support Services website at: http://www.montgomerycollege.edu/Departments/dispsvc/.

For information about this document, contact Janet Merrick (jmerrick@montgomerycollege.edu), Counselor, Disability Support Services, CB122C, Rockville Campus or call (240) 567-5061, (240) 567-5058, or TTY (301) 294-9672.