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.1 Level AA. 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
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 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.
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 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 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 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.
Mark your table header row or column as headers in the html (add the <th> element).
Add a table caption.
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.
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.
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.
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.
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.
If 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.