Website Accessibility Checklist for Beginners

Posted on Monday, 25 May 2020 by Marissa Sapega

A website accessibility checklist is a helpful resource for creating an inclusive digital experience. An inclusive experience is essential because no one deserves to be excluded from the convenience and advantages offered by the internet, especially now with the COVID-19 pandemic sweeping the world and forcing individuals worldwide to shelter in place. This grim experience has laid bare the criticality of an accessible internet, as tasks such as grocery shopping, meeting with peers, and even the dissemination of critical information are substantially more difficult without the use of the World Wide Web.

Your WCAG 2.0/2.1 accessibility checklist primer

There are many easy ways to improve the accessibility of your website. Many of them require access to the HTML undergirding the site, so it will be helpful to have a little foundational knowledge of coding.

laptop screen with lines of code
To create an accessible website, it is critical to conform to the Web Content Accessibility Guidelines (WCAG). These guidelines contain the criteria a website needs to meet in order for people with disabilities to be able to have a comparable experience to that of someone without a disability when navigating a website. But for beginners, it can be a little overwhelming. Below you’ll find actionable, easy-to-implement tips for making your website more accessible.

Alternative text

Alternative text, or “alt text,” is helpful for people who use screen readers. A screen reader cannot interpret an image and describe it to the user; it merely reads the code. If there is no alt text, the user will have no idea there is an image on the page. Using the “alt” attribute for the image tag ensures the screen reader will read the image’s description aloud.

Color contrast

For color blind or low-vision individuals, color contrast can make or break the web experience. If there is not enough contrast, such users will be unable to experience the web as intended by the developer. WCAG conformant websites adhere to the 4.5:1 contrast ratio – and you don’t even have to be a mathematician to figure out the contrast, as there are plenty of free color contrast checker tools available for this very use.

Descriptive headings

A well-designed web page will make use of header tags (such as H1, H2, H3, etc.) to break up content and enable the user to skim the content more easily. Unsurprisingly, header tags are also quite helpful for people with disabilities:

  • Clearly defined sections make it easier for those with cognitive and vision disabilities to focus on distinct areas of the page
  • Headers enable a screen reader user to skim the page much in the same way someone with normal vision would
  • Content that does not rely solely on visual cues, such as color or font size, will enable all users to differentiate between types of headers for less confusion

Accessible multimedia

If you were to watch a movie with the sound off, would you be able to follow the storyline? Unless you were pretty adept at reading lips, the answer is probably no. Individuals with hearing disabilities feel this way all the time when multimedia is not captioned.
video screenshot with captions
Not only will captions make for a more inclusive experience, but it will also help ensure your content can be consumed in a variety of situations. One scenario you may not have considered is someone perusing your website on a mobile device in a public area. Users may not always have access to headphones, nor will they want to disturb others around them, so your inaccessible multimedia may diminish the overall user experience.

While these recommendations are not a comprehensive website accessibility checklist by any means, adhering to them will undoubtedly improve the user experience for someone with a disability.

What should a web accessibility checklist cover?

There are many differences between how individuals without physical or cognitive limitations engage with a website in comparison with how someone with a disability engages with one. For example, blind or low-vision users may utilize assistive technology such as a screen reader, which literally reads everything on the screen. An individual with limited mobility may only be able to navigate using the keyboard, whereas someone with a cognitive disability may be easily overwhelmed by a disorderly and crowded website. By anticipating the different ways a user may engage with digital content you can create a checklist that will mitigate many of the most common challenges people with disabilities face while online.

Are accessible websites part of the ADA?

When the Americans with Disabilities (ADA) was passed in 1990, virtually no one had heard of the “internet.” People were too occupied with other notable events such as Germany’s reunification, the launch of the Hubble Space Telescope, and Nelson Mandela’s release from prison. But disability advocates were thrilled there was finally a law in place that gave them agency to fight back against discrimination.

While there is nothing in the ADA that explicitly references digital accessibility (for the reasons mentioned previously) the DOJ has stated on multiple occasions that “the ADA applies to public accommodations’ websites.” There have been thousands of lawsuits against businesses with inaccessible sites over the past few years, and the pace shows no signs of slowing down.

Don’t forget to use tools to supplement your web accessibility checklist!

The Paciello Group offers a single page accessibility testing tool, Toolkit, as a free Chrome extension. It checks your web pages against a multitude of web accessibility criteria and is incredibly easy to learn. The tool uses a website accessibility checklist of sorts to evaluate your web pages, which will also help you identify your most common errors. The more you test, the faster you’ll learn how to stop these accessibility failures before they occur.

A web accessibility checklist is certainly a handy resource to have at your disposal, but if you find yourself needing more in-depth accessibility help, contact TPG, and we’ll help you work towards achieving your accessibility goals.


Need help with your specific accessibility needs?

Contact Us

Comments

Comments for this post are closed.