To ensure equal access to information for all people, all Northwestern web and digital content should be compliant with Web Content Accessibility Guidelines (WCAG) 2.0. You can review your site using our basic website accessibility checklist below. Additionally, you may use Siteimprove to scan your site for accessibility issues and other content related issues.
When considering content accessibility, it's important to keep in mind the different components that will need to be made accessible. For implementation tips and best practices for creating accessible web pages, documents, audio and video, visit our creating accessible content page.
Consider the following when reviewing the checklist below:
- Content providers using this list should have the ability to view and edit a web page’s HTML
code,and understand the concept of “wrapping” items with specific tags in the code.
- Tabbing, the act of skimming a page via
links,is suggested as a quick method of identifying issues and can be used to identify a majority of initial problems encountered by keyboard-only users.
"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 alternative to non-text content (e.g. inforgraphics)
- Provide a description of all images in an ALT attribute (use Image Description field in Cascade). The ALT attribute allows you to convey to all users the content and meaning of the image. For example: <img src="picture.jpg" ALT="Northwestern University Library">
- Mark the image is redundant or simply decorative and taking it away won't reduce the message, 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. You can either add a document link before the image or add image description to the page and "hide" it for sighted users. Use <p class="hide-text"> to hide the text (works for OGMC supported sites only, other sites editors should check with their website admins).
- 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.
- If you have image links, the ALT text should be used to describe the purpose of the link and link location.
- Use SensusAccess document converter to convert your scanned documents to an alternate format.
Use headings and lists to organize your content
- If you are a Cascade user (or other CMS, if applicable), use WYSIWYG formatting options to apply headings to your text. Think how you use headings in a word document and use the same concept for your web content.
- Do not skip a heading level, for example, don't use H5 right after H3.
- Don't use "Bold" to make your text appear as a heading. Mark it as a heading programmatically by using Headings available in the CMS.
Use descriptive links
- Use descriptive link text as much as possible. Site users should know the link purpose BEFORE they can click on a link.
- Link text that reads "Click here" or "Read More" isn't great for accessibility. Utilize the "Title" attribute (Title field in Cascade) to add additional information about the link. For example, if your link text "Read more" is part of a sentence and it can not be made descriptive, you could add additional information like "further information from the W3C on Web accessibility" in the title field.
- Links and adjacent icons must be combined to make a single link.
Provide alternate routes to information for multimedia content
- Provide transcripts and captioning of audio and video.
- Use special effects with caution and only with good reason.
- Do not use Flash, Shockwave, or other interactive elements
- 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.
Follow table best practices
- Mark your table header row or column as headers in the html (add the <th> element). See instructions on Cascade help site.
- Add a table caption. See instructions here.
- Try not to use tables for creating "layouts" in a webpage.
- Semantic elements are used to establish a link between data cells and table headers.
- Table contains a summary attribute or aria-described by / aria-label attribute.
- Tables have a caption (title) established.
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 the readability of content.
Follow playback media best practices
- Embedded video does not auto-play for longer than 5 seconds.
- Auto-playing images, videos, or other media are able to be paused by the user.
- Videos have appropriate closed captions.
- Captions are provided for live media such as streams.
- Audio only media must provide a transcript of the audio.
Follow page navigation best practices
- Headings are established in the correct order. (Heading 1, Heading 2, Heading 3).
- Ensure landmarks, if used, reflect wrapped content.
- Ensure the page has a title that describes purpose or topic.
- Iframes must have a title attribute describing topic or purpose.
"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.
Create a site map for your website
- 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.
Avoid using browser detects
- Different content is presented to different visitors based on the 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
- Learn more about 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.
- Page content should be easy to read and understand, and free of spelling or grammatical errors.