Web Accessibility Checklist for Creating Website Content

On behalf of the digital accessibility community, we’d like to thank you for your commitment to providing a website experience that is available to everyone, regardless of ability. Having an accessible website is something to be very proud of. Now that your website is WCAG conforming and accessible, you need to help keep it that way. This document outlines what that commitment means and the techniques needed in order to ensure the content you add is accessible from the time of publishing. 

What is Website Accessibility?

Website accessibility is a term that means a website is usable by all people, regardless of their ability. There are a variety of methods that people use to access the web. Tools used by individuals with disabilities are called assistive technologies. To ensure an equally excellent experience for all users, websites need to work with a variety of assistive technologies. The way to do this is by following the rules of accessibility as governed by the Web Content Accessibility Guidelines, or WCAG.

WCAG is a set of guidelines that has been developed that if followed, ensures your website & content will be usable by all users. There are 3 levels of WCAG and each have a set of Success Criteria that must be met in order for a site to be considered “conforming”. Those levels are: A (single A), AA (double A) and AAA (triple A). Each level builds upon the previous (meaning that in order to achieve AA, the site has to meet all of the A success criteria in addition to the AA success criteria. WCAG Single A is the easiest to attain and Triple A (AAA) is the most challenging. Most laws related to accessibility require level AA. 

Why is website accessibility important?

There are 3 primary reasons that website accessibility is important: social responsibility, legal protection and good business. The internet has the power to break down barriers and put people from all walks of life on an equal playing field. In many countries, including the United States, having an accessible website is required by law. An accessible website is usable by more people, therefore there is an increased potential customer base. 

Who is impacted by website accessibility?

Approximately 1 in 4 people have some sort of disability that impacts the way they interact with a computer & the internet. Some of these people have permanent disabilities while others’ have conditions that are temporary. As we all age, the chance of losing your sight or hearing is very high. Website accessibility means that your website will be accessible & usable by all people, including those with disabilities who use assistive technologies such as screen readers, zoom text, sip & puff devices, and many more.

What do I need to do in order to keep my new website accessible?

We’ve put together a list of items that you’ll need to be aware of while adding content such as blog posts, new pages or adding content to existing pages. The following list will walk you through the different techniques you’ll need to follow in order to keep your website accessible. You’ll need to ensure you are following all of these guidelines every time you add content to your site. 

Accessible Web Content Checklist:

Write descriptive alt text for your images

Users with low vision often make use of talking browsers, aka screen readers, to “read” the web. These specialized browsers convert text to speech so that a user can hear the words on a site. When a screen reader lands on an image, it looks for alt text that it can read aloud; if it finds none, it will often just say “image,” leaving the user in the dark as to what the image is and how it matters to the story.

Describe all of the elements that explain what’s happening in the image, rather than just setting the alt text to be something like, “photograph”. A good example of descriptive alt text for the following image is “White trillium flowers in bloom in a forest”.

White trillium flowers in bloom in a forest - Example of a descriptive alt text

If you have to use an image of text, be sure to describe the design if relevant, as well as all of the words in the image. (Ex: Whiteboard drawing of the quote “Nothing for us without us”)

Be as consistent, clear and organized as possible

Be clear in copy, avoid jargon & idioms, and use section headings to organize content. Keep headings in logical order (H1, H2, H3, etc). Avoid skipping heading levels and make sure you use headings to denote meaning, and not just to style text.

Example of proper usage of headings:

HTML headings in a logical order using a beetle's parts as an example.

When you use abbreviations, make sure to write out the whole name first with the abbreviation in parentheses. Example: Web Content Accessibility Guidelines (WCAG). 

Assistive technology like screen readers are able to find all links on a page and present them in various forms, but these links are rather useless if it’s a long list of links that are just the text “click here.” A better way is to have the link describe where the user will go if they click it, giving them an idea of what’s on the other side of clicking.

Use descriptive text for links instead of words that provide no context (“Read Our Shipping Policy” versus “Read More”). 

Important information should not be conveyed through images, color, or sensory characteristics alone

You should not rely solely on images, shape, size, visual location, orientation, or sound to indicate important instructions for operating or understanding content (ex. “See the image above”). Instead, use a combination of positioning, color, and labeling to identify content.

There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.

Example Failures:

  • Navigation instructions for a site states, “To go to the next page, press the button to the right. To go back to the previous page, press the button to the left.”
  • A user is completing an on-line survey. There are three buttons at the bottom of the survey form. The instructions state, “Press the square button to exit the survey without saving, Press the triangle button to save in-progress survey results. You may return later to complete the survey. Press the round button to submit the survey results.”

Video content must include captions and an audio description in order to meet AA standards

Synchronized captions are provided for non-live, web-based video (YouTube videos, etc). YouTube/Google provides tips on creating and editing captions – https://support.google.com/youtube/answer/2734796?hl=en&ref_topic=7296214.

Audio descriptions are provided for all video content. This is only required if the video conveys content visually that is not available in the default audio track. To see/hear an example of an audio description, see this clip from The Hunger Games on YouTube – https://www.youtube.com/watch?v=B8BD9txkGL4. All Netflix videos have audio descriptions, so you can toggle those on to experience it on a different platform.  PennState University has a guide about audio descriptions that includes information about creating them – https://accessibility.psu.edu/video/audiodescription/adwhitepaper/.

Do not design content in a way that is known to cause seizures or physical reactions

Web pages can not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. Individuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes. People are even more sensitive to red flashing than to other colors. 

Page titles uniquely describe the page’s topic or purpose

Descriptive page titles identify the current location without requiring users to read or interpret page content. When titles appear in site maps or lists of search results, users can more quickly identify the content they need. User agents make the title of the page easily available to the user for identifying the page. For instance, a user agent may display the page title in the window title bar or as the name of the tab containing the page.

Here is a live example of a descriptive title tag

Example of a page's title tag

Ensure PDFs are accessible

Make sure your PDFs are accessible. Unfortunately, PDF accessibility techniques are a much bigger topic than we can tackle here. If you want to know how to make accessible PDFs, here are some resources:

Requirements for an Accessible PDF

PDF Accessibility – Deque University (online course)

But before you jump into making your PDF, ask yourself if that content really needs to be a PDF. More often than not, it would work just as well as a web page. If you’re trying to get people to share content information by offering them downloadable content, see if you can build pages behind a login or generate unique access URLs. If you think it’s the kind of content piece people would really want to be able to download, offer an accessible PDF in addition to the accessible web page.

Make sure there is enough contrast between text and its background color

The contrast ratio between text and the text’s background should be at least 4.5 to 1. If your font is at least 24 px or 10 px bold, the minimum drops to 3 to 1. Be especially careful with text over images. 

The following tools help you figure out what color contrast ratios your color choices are or help with selecting accessible color palettes:

If you need to find the color hex codes for colors on your site, the following eyedropper tools are helpful:

Don’t indicate important information using color alone

There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.

Example Failures:

  • Link text the same as regular text (the words “Link text” are a link)
  • Required form fields are in red:
    • Name:
    • Address:
    • Email:
  • Conference Schedule
    • SEO Track: Blue
    • SEM Track: Green
    • Social Track: Red
Example failure where a table uses colors to convey context.  Don't do this.