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 firstname.lastname@example.org.
Section 508 of the Rehabilitation Act
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.
The Web Content Accessibility Guidelines (WCAG)
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.
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:
- Associate brief descriptions and titles with each image (especially ones with hotspots), form object, media object and applet:
- In Dreamweaver, 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: text
- When constructing data tables, assign table captions, summaries and headings:
- In Dreamweaver, 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: text
For summaries: summary="text"
For headings of columns: text
For headings of rows: heading
- 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, 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:
- 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):
- Good options for light colors: shades of green, yellow, and orange
- Good options for dark colors: shades of red, blue , magenta and pink
- To test possibilities, visit the Color Laboratory
- 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
- 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.
- 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.
- Subject them to quality assurance testing by prospective viewers. If possible, have users with disabilities comment on navigation and use of language.
- IBM Web test techniques
- MIT's Keyboard Friendly Shortcuts
- Lighthouse International's "Accessibility Guidelines for the Web Designer"
Online Automated Checking Tools
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 Adobe Acrobat to take advantage of its capacity to create a "tagged" PDF files, which provide structure and label elements a screen reader can interpret. For more on PDF accessibility and preparing tagged files, see http://webaim.org/techniques/acrobat/acrobat.
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.
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.
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.