Webpage Accessibility Checklist

Using this list should result in highly accessible (though not necessarily perfect) site. If you are unsure of what a heading is referring to, please refer to the associated links for more information.

Theme Selection

Using an “accessibility ready” theme is solid foundation for a more accessible site. Themes with this label have gone through extra steps to validate their accessibility.

Themes control how your site looks, which is important for things like contrast that impact readability for all users. Themes also control other important things, like how menus work for people who use screen readers or use special controls instead of a mouse.

The WordPress theme repository has a number of themes that carry the “accessibility ready” designation. This indicates the theme has passed this theme accessibility audit. Choosing a theme that is already determined to be accessibility ready helps ensure a more accessible site from the start.

If you choose to go with a theme that is not on this list, it is still possible for you to create an accessible site; just know that it may take a bit more time and a more in-depth knowledge of coding and web design in order to do so.

Header Usage

Think about headers  (h1, h2, h3, etc) like an outline for a paper, rather than a way to achieve decorative effects. Headers should go in order and can have other content like paragraphs or images in the order.

Patterns like H1, H2, H2, H3, H2 are fine in the same way that outlines have different levels of topics but patterns like H1, H3, H4 would not be valid because the H2 level is skipped.

In the case of this document, the ‘Webpage Accessibility Checklist’ text above is set to be an H2 element. The elements below (‘Color and Contrast’ etc.) are set as h3 elements. You can get a much deeper explanation of headings and accessibility here.

Heading tags are an easy way to help organize your page for everyone and they have particular advantages for improving accessibility.

WordPress gives you easy access to header tags in the WYSIWYG editor.

WordPress WYSIWYG Editor - Dropdown menu of heading options and suggestion to use Toolbar Toggle button to get to editor settings.
You can see how the use of heading tags impacts accessibility in this video.

Color and Contrast

It’s important to have strong contrast between text and its background.

Color should not used as only indicator of meaning.

A lot of website design revolves around visual appeal, such as color, layout, and interesting graphics or animation. A well-designed website should be physically easy to read for all users. Generally speaking, following the below guidelines for accessibility not only makes a website accessible, but usually also means good ol’ design!

Color and Contrast:

As you think about what colors to use on your website, keep in mind the contrast between the background and the images or text in the foreground. The stronger the contrast that you choose, the more accessible the page is to users with visual impairments or color blindness.

You might also use a plugin to allow visitors to the site greater control over color contrast and font size. This video indicates how to activate the WP Accessibility plugin to allow that kind of interaction.

Another important part of color has to do with color used to convey meaning. While you can use color as one way to convey meaning, try to refrain from using color alone to indicate something. If you do use color to denote an important item, also use a non-color related indicator, such as an asterisk (with an explanation). 

To Learn More:

Penn State’s World Campus has created a website containing helpful tools and information related to color and contrast of websites.

Text

Make sure the font is easy to read. Readability for fonts is based on a combination of the font color vs the background color and the size of the font.

Sites that use small text should have the option to enlarge it.

Text is at the heart of just about every site. Here are some principles to keep in mind when thinking about appearance of the text on your site:

  1. Sans Serif fonts (i.e. fonts without serif) are typically easier to read than serif fonts are for persons who are visually impaired. Serifs are small tails attached to letters, which can distract the eye, or cause the eye to work a bit harder when reading. As a result, sans serif fonts are just easier on the eyes for most people. Popular sans serif fonts include Arial, Tahoma, and Verdana. Times New Roman and Garamond are serif fonts.
  2. Avoid tiny text. If you choose to use it, make sure there is a way to adjust the size of the font on your site.
  3. Avoid blinking text. It’s generally distracting, and may be falling prey to a visual cue to indicate meaning that is not conveyed by any other means (read more about blinking text here). If it blinks at a rate of more than 3 times per second, it’s also a seizure trigger risk!

WebAIM has lots more information on the topic of text, as does the British outfit AbilityNet.

Links

Descriptive links should explain in words what you’re linking to.

Links should have other indicators beyond color to indicate the text is a link.

The same words for a link should only be used once per page (unless linking to the same thing).

Links are an essential element of websites.

The idea behind a properly formatted link is that the user should know that it’s a link, and have a general idea of where the link will take them when it’s clicked. Typically, a link will be delineated as text that is a different color to begin with, or changes color when hovered over with the mouse pointer. It’s most helpful to visually differentiate link text even more by having it underlined. Underlining helps make the link visible to people who might perceive color differently.

If you’ve been reading this site in order, you may be saying to yourself ” That’s a visual-only indicator! That’s not allowed.” This a bit different because screen readers recognize links automatically, and will tell the user that something is a link. Screen readers literally announce it by saying “link” followed by the words that make up the link.

The other important part to good links is the actual text. Link text should be:

  1. Unique to that link (don’t have a bunch of “click here” links repeated on a page)
  2. Descriptive (when the screen reader reads the text make it say something useful)
  3. Real words (i.e. not a url)

1. Unique to that link

Text that is unique to that link means that the words in that link text are found only one time on the same page (unless they link to the same thing). When a screen reader reads a link, it will announce that it is a link followed by the text that makes up that link. So if your link says something along the lines of “read more here,” multiple times on the same page, a screen reader user will likely have a hard time keeping track of what that link leads to. If the user is just navigating specifically to links only on the page (a common practice), there is no way of knowing which of those links links to the page they want to read more about.

2. Descriptive

When we say descriptive, we don’t mean “click this underlined blue text link to go to my favorite website www.myfavoritewebsite.com because it’s the best!” We mean describe what the link is linking to. “Read more here” is somewhat descriptive. You know if you click the link, you will get to read more about something. But we can provide better context. An example might be “click here to visit my favorite website.” You know that if You click that link, you will be taken to my favorite website.

3. Real Words

Use words for links rather than plain URLs.  Links in a page like www.myfavoritewebsite/thisisthebestplaceonearth/iamawesome.com are not only cluttered to a sighted user, but a screen reader will announce “link” and then read that url out loud character-by-character since it is not composed of recognizable words. That is a very unpleasant experience.

Images and Video

All informational images should have (appropriate) alt text.

All videos should be captioned.

Alt Text

Alt text (literally the text that is an alternative to the image) is read by a screen reader when the user cannot see the image. This is where you want to make sure that you’re conveying the same information that is contained in the image. Most users of screen readers indicate they do not want alt text for decorative images, which is documented here at webaim, for example. Decorative images tend to be present mostly for visual appeal, rather than conveying information.

screenshot of arrow showing that the alt text box in WordPress is the fourth entry field from the top when uploading media. Text overlay indicates that alt text should only be used for content images, not for decorative images.

Like many areas of accessibility, there is no “one size fits all” or clear-cut formulaic way to determine the best alt text for an image, but there are some things to keep in mind. You need to take into account the context and your intent. Try asking yourself the following questions:

  • What text surrounds the image?
  • What did I mean to convey when I decided to include the image?
  • Why did I include an image here, rather than no image at all?
  • Does the image contain text that needs to be conveyed?

These questions should be answered in the alt text of the image, in a concise manner.

Here is the image from the top of this entry again:

screenshot of arrow showing that the alt text box in WordPress is the fourth entry field from the top when uploading media. Text overlay indicates that alt text should only be used for content images, not for decorative images.

The alt text for this image is “Screenshot of arrow showing that the alt text box in WordPress is the fourth entry field from the top when uploading media. Text overlay indicates that alt text should only be used for content images, not for decorative images.” This describes the location of the alt text box, which is the main take away message from the image, as the arrow is clearly pointing to the alt text box to indicate its location. It also describes the included text overlaid on the image, as this is not accessible to a screen reader (for the screen reader, the text is just a part of the image; it’s not actually interactive text).

This is not the one and only perfect alt text for this image. However, it includes pertinent information at the generally acceptable level of description; it describes the overall image and its intent clearly and concisely. It is longer than is generally typical because it includes a text overlay that is not accessible to the screen reader; however, it does not go overboard by describing unimportant characteristics, such as colors, fonts, or other text fields that are in the screenshot, but not related to the purpose of the image.

If you want to learn even more about alt text, Webaim has a deeper exploration that is well worth exploring.

Video: Captioning

Videos are a great way to enrich an experience, demonstrate a task, or provide a visual supplement. When using video, it’s imperative that videos be captioned, so that there is text available for those who cannot hear the audio in a video.

For the most common form of website video–embedded YouTube videos–captions are not always readily available and even when they are, accuracy is not always optimal. There are two things to keep in mind with captioning with YouTube videos:

1. Is it captioned at all?

The vast majority of the time, the video owner is responsible for making sure that captions are available. You can check and see if a video is captioned by looking in the bottom right hand corner of the video player; if a “CC” is present, such as in the image below of a TEDTalk, the owner of the video opted to have the item captioned. If a “CC” is not present, your video is not captioned.

2. How accurate is the captioning?

All captioning is not equal. Make sure to watch your video with the sound off and captioning on prior to using it on your site. Can you understand the captioning? Does it cover everything it needs to? By doing this, you can check to see if the captioning provided allows for the understanding you are aiming for by using a video supplement. If it doesn’t then you can fix it.

Featured photo by Launchpresso on Unsplash