Four easy tests to determine if your website is accessible

OXD's QA Manager and web accessibility expert Sophie Repussard shares four simple tests to help you evaluate your website’s accessibility.
XFacebookLinkedInEmailCopy Link

Over the years I’ve spent a lot of time playing tech support for my family. For the most part this has meant helping my mother access her bills online. These long distance calls are always long and tedious, and at times frustrating. This led me down a path of considering varying levels of digital literacy and how different people experience the internet. As I started to think more about designing websites for users like my mother, I started to learn more about the principles of inclusive design, and eventually web accessibility. It was frustrating to see that people with disabilities were excluded by design, and I developed a real passion for web accessibility.

Web accessibility is the practice of ensuring equal access to digital services. As per the United Nations Convention on the Rights of Persons with Disabilities, web accessibility is a basic human right. A website is considered accessible when it can be used by people regardless of their visual, auditory, cognitive, or motor abilities.

What are the benefits of making a website accessible?

In 2016 it became mandatory for all Canadian government websites to meet the Web Content Accessibility Guidelines (WCAG) level 2.0 AA. In the United States, the same applies through Section 508 of the Rehabilitation Act of 1973. These guidelines aim to make websites perceivable, operable, navigable, and understandable for everyone.

Making your website accessible helps you reach a wider audience, reduces legal risk, and makes it more user friendly for everybody.

Okay, so how do I know if my site is accessible or not?

There are many tools and approaches for verifying and measuring whether a website is accessible. Here are four simple tests to give you a sense of how your site is experienced by people who rely on it to be accessible.

Image Test

People with visual impairments often rely on screen reader tools to read the content on a page. Unfortunately, these tools don’t describe and interpret images but making your website accessible will provide solutions for that. Follow the steps below to find out if the images on your site can be interpreted by assistive technologies.

Seeing what a screen reader sees

Chrome: Preferences > Settings > Advanced  > Privacy and Security > Content settings > Images > Turn off Show all within the Images section

Firefox: Tools > Options > Content > Uncheck Load images automatically

Internet Explorer: Tools > Internet Options > Advanced > Uncheck Show pictures

Does your content still make sense without images? Is there any important content missing? If your content is confusing without images and is missing some important information, it’s likely that your images are missing alternative text and descriptions.

Screenshots showing poor website accessibility with images

Contrast Test

Next, let’s take a look at the colour contrast on your website. This is important because people with low vision capabilities don’t perceive colours and fonts the same way as people with full visual capabilities. This is a good indicator of how your website might be experienced by somebody with low vision as a result of colour blindness or tunnel vision.

Try it out

Windows: from the keyboard, press Left Alt + Left Shift + Print Screen

MacOS:  System Preferences > Accessibility > Display > Invert Colours

Is all your content still easy to read? Can you find the information you’re looking for? If not, this would likely be a challenge for somebody with low vision.

Screenshot of website showing poor contrast accessibility

Audio Test

It’s also important to be aware of whether your site can be fully experienced without audio. In this case, we’re considering the needs of people with impaired hearing.

Try it out

This is an easy test to perform: turn off the volume of your computer and watch a video without sound.

Can your video content still be understood? Providing captions and transcripts helps users who experience difficulty hearing. Also, it improves the SEO of your website because all the text is laid out, allowing for more efficient crawling by search engines.

screenshot of audio button showing accessibility using transcripts

Keyboard Test

We’ve tested for visual and hearing impairments, but what about motor impairments? People who can’t rely on a traditional mouse and keyboard often use an alternative equivalent, usually with fewer keys. Could somebody navigate your website using only the "Tab" and "Enter" keys?

Try it out

Using the Tab key, jump from link to link, from top to bottom and left to right. Shift + Tab will allow you to go backwards.

The Enter key is used to validate an action such as clicking on a link or submit a form.

Were you able to navigate your website with ease? If not, it’s likely your website is missing a navigation focus such as a rectangle to indicate the current position. Were you able to use different functions, like forms and date pickers? If functionalities could not be activated using the ‘Enter’ key, it means the code is missing html elements that allow these features to work without mouse control.

screenshot of WebAIM accessibility website

By providing a better user experience for people with disabilities, you’ll also improve the experience for all users. For example, we saw earlier that having captions on video content is helpful for those with hearing impairments, but it’s also helpful to people in loud environments.

Now that you’ve tried these simple tests, you’ll have a better sense of whether your website is accessible or not. Just be aware that there are many other tools and approaches to verify and measure the level of accessibility of your website.

If you’re interested in learning more about accessibility and diving deeper into your website’s accessibility performance, please get in touch with us today.

Planning your own website redesign or design and build of a new website? Download our free website project planning guide.