Accessibility Information
Many visually impaired users rely on text reading devices to make content available to them via audio.
Accessibility Recommendations
- Use language that is as simple and clear as possible.
-
Provide text equivalents to all nontext content.
-
Provide a description of all images, sound files, applets, etc. in an ALT TEXT tag. The ALT tag allows you to convey to all users the content and meaning of your page. For example:
<IMG SRC="picture.jpg" alt="Northwestern University Library">
- If your nontext content is dynamic, make sure that equivalents change with the nontext elements.
- If your page cannot contain text equivalents within it, consider creating a parallel text-only version of the page as a last resort.
-
Make sure that text and graphics make sense without color.
People who cannot differentiate between colors or who are using devices with noncolor or nonvisual displays will not receive or understand information that relies on color for its meaning. Choose backgrounds that contrast with page text and don't interfere with readability of content. Within the content of a page it is customary to underline links. In the navigation area of a page, it is acceptable to use a clear, consistent, non-underlined link format such as a specific and distinct font, style, and size.
-
Don't use frames.
- Frames are not universally accessible.
- The content of frames may not be searchable by search engines.
-
Avoid using server-side image maps.
- Navigation of pages using server-side image maps requires a mouse, which renders the page inaccessible to most visually impaired users.
- If used, consider providing a link to an alternate text version or summary.
- Client-side image maps are accessible because the information is stored locally and can be linked to using a text reader.
-
Use descriptive links.
- Instead of denoting a link with the words "Click here" or similar phrase, be descriptive when providing links; for example: "further information from the W3C on Web accessibility."
- Consider allowing such links to stand on their own line or provide an ordered or unordered list of links in HTML.
-
Use headings and lists to organize your page and reinforce consistent page structure.
- When possible, use mark-up language (<H1>,e.g.) rather than images or visual cues to emphasize the structure of your page.
- Organize documents so they may be read without style sheets.
-
Test pages in multiple browsers, operating systems, and connection speeds.
- Test your pages on older Windows and Macintosh systems in both Netscape and Internet Explorer.
- Pages intended for modem users should be tested for load times on slower connections (56K). A large image that downloads immediately on University computers may take 30 seconds to load on a modem connection.
-
Provide alternate routes to information when using interactive technologies.
- Provide captioning and transcripts of audio and descriptions of video.
- Pages that use Flash, Shockwave, or other interactive elements may not be accessible with older browsers. Provide a link to a text-only or non-interactive version of the information. Use special effects with caution and only with good reason.
Potential difficulties include:
- May not work (or will work unpredictably) on different systems
- Harder to implement and maintain
- Take longer to download
- Require users to install plug-ins
- Text readers and search functions don't support JavaScript--not ADA compliant
Accessibility @ northwestern.edu
FYI: What Northwestern University does to facilitate accessibility on top-level pages
- Have descriptive ALT attributes on images that carry content
- Have empty ALT attributes on images that do not carry content
- Design table structure to keep columnar information together instead of reading in rows left to right
- Allow navigation independent of JavaScript
- Keep navigational elements in the same location on every page
Northwestern's future plans to enhance accessibility
- Have "Next Page," "Previous Page," and "Up A Level" navigational meta tags
- Have "Skip to Main Content" links
- Enable keyboard shortcuts or hotkeys for link selection
- Use the "label" tag on forms whenever the field label is not obvious
Accessibility Tips For Designers
Recommended
- Use high contrast text/background combinations with little or no pattern in background.
- Use proper heading styles to structure a page <H1>, <H2>, etc.
- Use CSS when possible.
- In text, use relative font sizes, e.g. "big," "bigger," "small," "smallest."
- Use "ALT" attributes to describe images
Strongly Discouraged
- Use of red/green combinations
- Designation of headings by using "Bold" formatting
- Use of absolute font sizes in running text, e.g. "10pt."
- Making navigation or other essential information depend solely on images