Jump to Navigation ▼
Many visually impaired users rely on text reading devices to make content available to them via audio.
- 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 attribute. The ALT attribute 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, but only 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.
- Use relative sizes for all fonts.
- Most browsers support resizing of fonts. Fonts should be set via style sheets rather than deprecated HTML. When sizing text, the use of percentage values is recommended over fixed point sizes, to support re-sizing. Use of HTML heading tags such as <h1> and <h2> also helps text reading devices to interpret the structure of the page.
- Don't use frames. Frames are not universally accessible. The content of frames may not be searchable by search engines.
- Avoid using 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.
- Use mark-up language rather than images, visual cues, fonts or sizes alone, to emphasize the structure of your page.
- Test pages in multiple browsers and operating systems.
- Provide alternate routes to information when using interactive technologies.
- Provide captioning and transcripts of audio and descriptions of video.
- Use special effects with caution and only with good reason. Pages that use Flash, Shockwave, or other interactive elements may not be accessible to some users. You must provide a link to a text-only or non-interactive version of the information. Potential difficulties include:
- May not work (or will work unpredictably) on different systems
- Harder to implement and maintain
- Take longer to download and require users to install plug-ins
- Avoid using browser detects.
- Different content is presented to different visitors based on browser. If something doesn't work in a given browser, that element should not be used at all instead of only being presented to a segment of visitors.
- Avoid using deprecated tags and attributes.
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.
- Use tables only for tabular data.
- Keep navigational elements in the same location on every page.
- Consult the latest W3C guidelines.
- 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.
- Use "ALT" attributes to describe images.
- Use relative font sizes.
- Make sure page is "backwards compatible" (that is, that it "fails gracefully").
Strongly Discouraged (all hinder accessibility for those with visual impairments)
- Use of red/green combinations.
- Designation of headings by using "Bold" formatting.
- Making navigation or other essential information depend solely on images.