Accessibility Checklist

Specific Areas to Check

There are many areas to check for accessibility. Below you will find some key principles of accessible design:

Page titles are an important part of a web page because they help people know where they are and move between pages open in their browser. Also page titles:

  • are displayed in the window title bar in some browsers
  • are displayed in browsers' tabs when there are multiple web pages open
  • are shown in search engine results
  • are used for browser bookmarks/favorites
  • are read by screen readers (The first thing screen readers say when the user goes to a different web page is the page title).

Text alternatives ("alt text") are necessary to convey the purpose of an image, including pictures, illustrations, charts, etc. The ALT text should be functional and provide an equivalent user experience, not necessarily describe the image. If an image conveys information useful for interacting with or understanding the web page content, then it needs alternative text.

Appropriate ALT Text:

  • Conveying the same meaning as the image, so that important information is derrived from the image even if it can't be seen. What would you say about the image if you were helping someone read and interact with the web page?
  • Images that are functional — for example, images that initiate actions (like submit buttons) and linked images (like in navigation) — need alt text that is the functional equivalent. "Registration Form"; "Submit Your Application"
  • If there is text in the image that text needs to be included in the alt text.
  • If the image has complex information — such as charts or graphs — the image should have a short alt text to identify the image, and then the detailed description of the information should be provided elsewhere (for example, in a data table).

What is not needed in the alt text:

  • The alternative text does not need to include the words "button", "link", or "image of". (Screen readers automatically provide that information.)
  • If the image is sufficiently described in the text — for example, a simple diagram illustrating what's written in the web page text — it can have brief alt text such as "Diagram of work flow as describe above."

Heading levels should have a meaningful hierarchy and resemble and outline structure:

  • Heading Level 1 <h1>
    • Heading Level 2 <h2>
      • Heading Level 3 <h3>
      • Heading Level 3 <h3>
    • Heading Level 2 <h2>
      • Heading Level 3 <h3>
        • Heading Level 4 <h4>
        • Heading Level 4 <h4>
    • Heading Level 2 <h2>

What to check for:

  • The page has a heading. In almost all pages there should be at least one heading.
  • All text that looks like a heading is marked up as a heading.
  • All text that is marked up as a heading is really a conceptual section heading (the heading styles should not be used simply to emphasize text).
  • The heading hierarchy is meaningful. Ideally the page starts with an "h1" — which is usually similar to the page title — and does not skip levels; however, these are not absolute requirements.

Web pages are often designed with multiple columns, sections, colors, and other visual aspects that help organize information for people who see the page in its default display. However, people who are visually impaired listen to the page with a screen reader or read it from a Braille display. Some people with low vision and others change the way the page is displayed so they can read it; for example, change from multiple columns to one column, change the text size, and more.

What to check for:

  • Check that the information makes sense when read in the order it is shown; for example, headings are right above the information they apply to.
  • Check that the ALT text provides adequate information for the missing images.
  • Check that blocks of information have clear headings. Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

When navigation, main content, and other sections have good headings and are structured well, it's easier for people to find their way around the information.

Tables should be used to organize tabular data and not for formatting other eleements. Formatting and using data tables appropriately is crucial in making it readable to text readers and other assistive devices. Provide headers for data tables so that data cells should be associated with their appropriate headers making it easier for screen reader users to navigate and understand the data table.

Ensure links make sense out of contextEvery link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.

Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

 Videos and live audio must have caption and/or provide transcripts for media. With archived audio, a transcription may be sufficient.

You must be sure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element, and that users can complete and submit all forms. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

Video Resources

Experiences of Students with Disabilities

The students in the following video share some of their experiences with the web and accessibility.

Keeping Web Accessibility In Mind

Gain an appreciation of web accessibility by understanding the user perspective with this overview of the difficulties users with disabilities face on the web and some of the motivations for web accessibility.