In order to ensure equal access to information for all people, all NU websites should be compliant with Web Content Accessibility Guidelines (WCAG) 2.0. These standards have been created as part of the Web Accessibility Initiative (WAI), a working group of World Wide Web Consortium (W3C) to ensure that web content is accessible to everyone. Section 508 of Rehabilitation Act outlines many of these requirements.
What can you as a content editor do to make your website accessible?
- Become familiar with WCAG Standards.
- Review your site using the website accessibility checklist. The list provided here is paraphrased from the W3C Web Accessibility Initiative. See full list of WCAG 2.0 Level A guidelines.
"Must Have" Checkpoints
Following these “Must Have” checkpoints from the list will make your site W3C compliant. We recommend you follow as many “Must Have” and “Should Have” checkpoints and try to attain as many ”Good to Have” checkpoints as possible.
- Provide text equivalents to all non-text 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 the image is redundant or simply decorative, mark it as “Decorative” using Cascade or give it a blank ALT tag (ALT="").
- If your site has graphs or charts, try to summarize content to go within the Alt attribute. If necessary, provide a text description on the page itself that will also be helpful for sighted users.
- 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.
- If your non-text content is dynamic, make sure that equivalents change with the non-text elements.
- Make sure that text and graphics make sense without color. People who are blind, color blind, visually impaired 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.
- Page content should be easy to read and understand, and free of spelling or grammatical errors.
"Should Have" Checkpoints
The “Should Have” checkpoints will make your site accessible for most people. These checkpoints emphasize proper use of html and style tags.
- Always use Cascade (or other CMS, if applicable) formatting options to style your web page.
- Use headings and lists to organize your page and reinforce consistent page structure. This helps screenreader softwares interpret the structure of the page.
- Create a site map for your site and avoid using image maps for navigation.
- 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 mark-up language rather than images, visual cues, fonts or sizes alone, to emphasize the structure of your page.
- 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. We recommend that you do not use Flash, Shockwave, or other interactive elements because special effects:
- May not be accessible to some users.
- May not work (or will work unpredictably) on different systems
- Are harder to implement and maintain
- Take longer to download and often 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.
"Good to Have" Checkpoints
The checkpoints under the “Good to Have” category will make your site easy to access for people with disabilities.
- Between two adjacent links, insert a printable character surrounded by spaces.
- Use of “Breadcrumbs” is recommended.
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. Add a brief summary of the table content for screenreader softwares.
- Keep navigational elements in the same location on every page.
If you have further technical questions on how to use specific markup features to support accessibility, visit the W3C online technical reports or email the Web Accessibility Initiative at email@example.com.
- 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 "backward compatible" (that is, that it "fails gracefully").
Strongly Discouraged (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.