Web Content Accessibility

Section 508 of the Rehabilitation Act
Web Content Accessibility Guidelines
Accessibility Best Practices
Online Automated Checking Tools
PDFs and Accessibility
Assistive Technologies

While, most significantly, web accessibility opens doors to information for individuals with disabilities, in reality, it offers benefits for all users by creating more usable Web sites. With accessibility, web contents can be understood by everyone, regardless of ability or accessing device (e.g., browsers, assistive technologies, mobile technologies, etc.) or other constraints (e.g., limited bandwidth, hands-free environment, etc.)

We recommend that Boston College community members who are creating material for the web take a proactive approach, by observing the standards set by Section 508 of the Rehabilitation Act and the Web Content Accessibility Guidelines people with disabilities, including visual, hearing, mobility and cognitive impairments and seizure disorders. For further assistance with making your web content accessible, contact Instructional Design and eTeaching Services at ATSInstuctTech@bc.edu.

Section 508 of the Rehabilitation Act, published on December 21, 2000, is to ensure access to electronic and technology information by people with a wide range of disabilities. Section 508 is made up of a set of clearly defined standards and covers a wide range of technology, including the Web-based information or applications, telecommunications products, etc. View Section 508 at http://www.section508.gov/

The Web Content Accessibility Guidelines (WCAG) from the Web Accessibility Initiative was the first major effort to establish guidelines for accessible design. This standard consists of fourteen guidelines, each with three checkpoint levels for Web developers to meet. Priority One checkpoints ensure that the page itself is accessible. Priority Two checkpoints ensure that certain groups will be able to access information on the Web page. Priority 3 checkpoints ensure that all content on the page is completely accessible. Section 508 of the Federal Rehabilitation Act in the U.S. is based on WCAG Priority One. View the Guidelines at http://www.w3.org/TR/WAI-WEBCONTENT/#Guidelines

Accessibility Best Practices
Provide text which a screen reader can use to make visual elements such as images and tables intelligible to someone who can't see them:

1. Associate brief descriptions and titles with each image (especially ones with hotspots), form object, media object and applet:
  • In Dreamweaver MX, you can set Preferences so you are automatically prompted to provide this information. With your Dreamweaver file open, select Edit>Preferences>Accessibility (Windows) or Dreamweaver>Preferences>Accessibility (Mac), click in the check boxes and click OK. When you insert one of those items, a dialogue box will open where you can type in the text. Leave the box blank where this information would be redundant or irrelevant.
  • Or, insert the following code attributes:
    For images and applets: alt="text"
    For media objects: title="text"
    For forms: <label for="form">text</label>
2. When constructing data tables, assign table captions, summaries and headings
  • In Dreamweaver MX, select Insert>Table and you will be prompted to fill in this information along with other table properties
  • Or, insert the following code attributes:
    For captions: <caption>text</caption>
    For summaries: summary="text"
    For headings of columns: <th scope="col">text</th>
    For headings of rows: <th scope="col">heading</th>

3. Make sure it is possible to navigate the web pages using only the keyboard, moving from one element to the next using the tab key. With most well-designed sites this happens automatically, but a few issues merit special attention:

  • Provide an alternative for content dependent on scripting, which cannot be accessed by keyboard.
  • Provide an alternative for content developed with dynamic html, such as Java menus which appear when the mouse rolls over them.
  • On pages with forms, assign a tab index which determines their tab order.
    • In Dreamweaver MX, look for this option in the accessibility dialogue box which opens when you insert the form.
    • Or, insert the following code attribute, substituting the appropriate number:
      tabindex="1"
4. Use strongly contrasting colors for text and graphics so that they appear more clearly, especially for people with congenital color deficiency or other visual impairments (keep in mind that light text on a dark background is often clearer than dark text on a light background):

5. Fonts should be standard and simple, and the type size as large as possible. If you are using a stylesheet, setting the font size with percentages rather than pixels will allow viewers to change the size of the font.

Once Your Web Pages are Complete

1. Have them tested by one or more of the free online automated checking tools listed below. Follow their instructions, and receive feedback on changes you can make to improve accessibility.\

2.View them with a screen reader, first listening straight through and then trying all navigational features. A screen reader is available in Academic Technology Services (contact Rani Dalgin at dalgin@bc.edu).

3.Subject them to quality assurance testing by prospective viewers. If possible, have users with disabilities comment on navigation and use of language.

Additional Resources

IBM Web test techniques: http://www-306.ibm.com/able/guidelines/web/webrecommend.htmlMIT's

Keyboard Friendly Shortcuts: http://web.mit.edu/atic/www/accessibility/developweb.html#keys

Lighthouse International's "Accessible Print and Web Design for the Visually Impaired" : http://www.lighthouse.org/web_design_for_visually_impaired.htm

WebAIM: http://www.webaim.org/techniques/evaluating/

Online Automated Checking Tools

Bobby: http://www.cast.org/bobby 

LIFT Online: http://www.UsableNet.com/lift_online/index.htm 

HTML Validator: http://validator.w3.org/ 

CSS Validator: http://jigsaw.w3.org/css-validator/ 

508 Accessibility Suite Extension for Dreamweaver: http://www.macromedia.com/exchange/dreamweaver/ 

HiSoftware: http://www.hisoftware.com/

InFocus: http://www.ssbtechnologies.com/    

PDFs and Accessibility

PDFs cannot be interpreted automatically by most screen readers. Although Adobe provides a plugin making PDFs accessible, it is best not to rely on the assumption that visually impaired people will have it. To make the information in a PDF available to them:

  • Provide an html version of the same text
  • Use Acrobat 5 or 6, and take advantage of the capacity those versions have to create a "tagged" PDF files, which provide structure and label elements a screen reader can interpret. For instructions on preparing tagged files, see the documentation from Adobe Acrobat at http://www.adobe.com/products/acrobat/access_book4.html

Assistive Technologies Users with disabilities frequently rely on hardware and software to make Web content accessible to them. These tools, known as assistive technologies, range from screen readers to touch screens and head pointers.

Screen Readers. Blind users of the Web frequently use a screen reader to read the contents of a Web page out loud. Two common screen readers are JAWS® from Freedom Scientific™ and Home Page Reader from IBM®. A screen reader can only read text, not images or animations. Therefore, it is important that images and animations have text descriptions associated with them that the screen reader can read (see best practice #1).

Mouse-free Users with mobility issues may rely on the keyboard instead of the mouse to navigate Web pages. For individuals with nerve damage, arthritis or repetitive motion injuries, use of the mouse may not be comfortable or possible. Using only the tab and enter keys on the keyboard, it is possible for these individuals to negotiate a page with ease. In Microsoft® Internet Explorer, pressing the Tab key moves the “focus” of the browser between all available links on a page. Pressing the Enter key activates links, much like clicking a mouse.

Touch screens and head pointers Some users may employ touch screens, head pointers or other assistive devices as well. In these cases, it is very important that essential components of the page work without a mouse. Rollovers, dropdown menus and interactive simulations are all examples of elements that are typically dependent on the mouse for user interaction. These elements must ensure that keyboard-defined events are included along with mouse-defined events (see best practice #10).

Creative Instruction, Creative Technology