fbpx

Website Accessibility Testing and Fixes

It may seem like an odd notion but website accessibility is incredibly important. We typically think of ADA (American Disabilities Act) compliance when it relates to a physical business but things have changed. Making sure your website is accessible can help you reach a wider audience, bring in more search traffic, and help you avoid an ADA lawsuit.

Why is website accessibility important?

For me, it really breaks down to adhering to compliance and attracting a bigger target market. Compliance has been the main driving force to website accessibility. The European Union (EU) has had website accessibility requirements for several years but there is definitely a growing trend in the US no as well. While there has been ADA speculation of the Department of Justice setting a clear standard, it appears the US is content to let court cases set the precedent. The 12 main categories for ADA compliance have been the primary targets of lawsuits. This includes industries like banks, medical clinics, and restaurants. It is definitely a higher priority for these types of businesses but definitely not one to sleep on for others.

…there are more hard of hearing users in the United States than the population Spain and more users who are blind and low-vision than the population of Canada.

~Google based on data from the World Bank

The other driver has been increased traffic. Approximately 20% of the population has an accessibility challenge impacting their use of websites. That is a massive group of potential customers to leave on the sidelines. And if you’re looking for even more traffic, search engines use a lot of the same features to understand and interpret a website. That being said, try to focus on actual users when implementing these features instead of search engines. We’ll get into that a bit more later.

Website Accessibility Testing Tools

There are a lot of great tools out and many are free to use. Here are my favorites:

  • Wave: This is my favorite tool to test the accessibility of an individual web page. It is fairly accurate and gives articulate feedback.
  • Tota11y: When you’re in development mode, this Chrome extension is pretty solid at on-the-fly testing. Wave is more accurate but this is a nice compliment to that tool.
  • Contrast Grid: There are different standards for color contrast and it can be tricky balancing a brand’s color palette to meet these requirements. Luckily, this tool helps you sort it out quickly.
  • Contrast Ratio: Handy tool if you want to quickly check a color contrast ratio along with font size recommendations for that particular color combo.
  • ChromeVox: For vision-impaired users, this tool can let you step into their world a bit. It is a free screen reading Chrome extension that allows you to navigate a website by keyboard and sound only.
  • WCAG: While more of a resource than a tool, WCAG sets the standard for website ADA compliance.
  • AccessibilityOz: When you need a helping hand, this agency is 100% geared towards website accessibility.
WAVE accessibility testing tool

Becoming Compliant

While WCAG guidelines are the gold standard for compliance, this article can serve as a primer to getting started. We’re going to look at some key components that every site should check.

It is also good to note at this point there are three levels of compliance when using WCAG:

  • Level A: This is basic accessibility with minimal requirements.
  • Level AA: This is the most common and used as the standard around the world for businesses and municipalities.
  • Level AAA: Very high standards used by some government websites and dedicated software.

Heading Structure

One of easiest fixes is to ensure your heading structure follows a proper hierarchy. For instance, there should be only one title/H1 heading for a web page. Going deeper, H2 headings should only be followed by other H2 headings or H3 headings. A page should never jump from an H2 heading to an H4 heading. Here how a web page might break down when viewed fr

Website accessibility heading structure

Color Contrast Ratio and Font Size

If we use the most common AA level, the contrast ratio for colors needs to be at least 4.5. This can vary based on font size. You can dip below this level for large font sizes but body text and smaller headings to meet the 4.5 bar.

I’d recommend not using text overlayed on an image. It makes it much much trickier to hit this standard. Due to responsive design where the text moves in relation to the background image, it is difficult to even know the contrast ratio.

Also, it is good to note that hover states, like for buttons, need to meet this level as well.

Color contrast grid
Screenshot of the Contrast Grid tool

Anchor Text

Anchor text is the hyperlinked words on a website. Try to use descriptive words when adding a link. Using phrases like “learn more” or “click here” provides no context to what happens when a user clicks that link. If they are using a screen-reader tool, it can be terribly confusing. This is also one of those times that search engines piggyback off of accessibility to understand links and the relationship between different pages.

Labels and Landmarks

These are special features intended primarily for accessibility. They allow the website developer to clearly label what is the navigation menu or what is a button. This extra information helps not only the user but screen readers. They can even allow you to hide certain elements from the screen reader if it isn’t necessary. For example, you can use the attribute aria-hidden=”true” for a decorative icon to hide it.

Media Descriptors

It is very difficult to interpret a photo for screen readers. The ALT tag attribute helps resolve this issue. You can add in a simple description of the photo for both screen readers and search engines. That being said, this feature has been notoriously abused by SEO (Search Engine Optimization) experts to game Google’s algorithm. The much better long play is to use this feature for its intended purpose as Google is getting smarter all the time.

In 2016, it was reported that 85 percent of Facebook video views occur with the sound off.

Paige Breaux

Likewise, a video can lose a lot of its impact if a deaf user can’t hear the content. Adding captions can help a ton. Research has shown that a vast majority of online users watch videos without sound. Captions can help all of these users plus search engines to understand the content.

Accessibility Guidelines

If you have a goal of accessibility for your website, let visitors know. Along with the privacy policy and terms of service in the footer, add a link to your “Accessibility Statement.” This can help show your intent, provide tips for use, and let visitors know where to reach you if there are any problems.

Going Forward

There is a depth of resources and other factors that need to be considered when making accessibility a goal and accessibility should be a goal for all websites. The trend is very clear. More compliance requirements and legal precedents are likely to come in the near future. Get ahead of the crowd by becoming compliant and welcoming in a new audience with an accessible website.

Posted in ,

Tyler Golberg

I love writing about web design that inspires, figuring out Google's black box, and speaking to lively audiences. In my spare time, I enjoy reading Game of Thrones (waiting on Winds of Winter) and touring the lakes on my paddleboard.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Not ready to start your project?

We completely understand! Timing is everything. Until that time arrives, why not join our small business guide newsletter. We share all of our best info for growing and streamlining a small business in the digital world, one step at a time.

No thanks

Join other local professionals to learn more about online marketing