Business owners, government agencies, schools, and everyone else with a website want the fastest, cheapest, and easiest way to implement a solution that ensures their website meets the standards of the Americans with Disabilities Act (ADA). Automated website accessibility testing is part of that solution—that is, as long as it is used correctly.
In our previous article, Why Using Automated Accessibility Tools for Testing Web Accessibility is Not Enough, we listed a few website elements that can only partially use automated website accessibility testing to determine accessibility. Since we find that automated website accessibility testing is a question we get in just about every call from a potential clients looking for a website accessibility solution, we want to elaborate a bit more on the topic.
How do I use automated web accessibility testing tools?
If you own a scroll saw, does that mean that you know how to use it and know how to use compound cutting to create three dimensional objects? Similarly, just because you purchase an automated web accessibility testing tool does not mean you know how to use it. Even after you learn how to navigate the tool so you can perform a website accessibility test and print a report, there is an additional skill involved to make the tool useful.
Think about the game of chess. You can learn the rules and know you can only move a king one space at a time, but does this mean you know how or when to put your opponent’s king in check? No. You still need to understand the rules of all of the other pieces and know how to use different strategies to actually win the game. Similarly, almost anyone can click the start scan button and run a website accessibility scan. However, not knowing how to accurately interpret the results will leave you with a report full of false negatives and false positives that does nothing more than give you false confidence that your website is ADA compliant and accessible to everyone.
It’s important to know the limitations of your web accessibility testing tool. Don’t expect just a “plug and play” type of tool. Combine your automated web accessibility testing with manual testing. Not only does this mean knowing the requirements of an accessible website, but it’s the only way to effectively evaluate your website to ensure you provide an inclusive experience.
What can an automated web accessibility testing tool do?
Once we know how to interpret an accessibility report, automated web accessibility testing tools can be highly beneficial. Before we decide which web accessibility testing tool we need, we need to consider what can and cannot be automated. This will prevent us from investing time and money in a product that doesn’t deliver exactly what we need. The table below lists some of the elements we are required to provide accessibility and shows whether or not we can automate the testing process.
|Automated Testing Possible?
|Alternative text accuracy
|Yes (with exceptions)
|Use of color
|Form label accuracy
|Page title accuracy
|Page language declaration
|Skip link accuracy
Although this table is far from an inclusive list, it does highlight common accessibility barriers. It demonstrates that even though automated testing is beneficial, we cannot fully declare a website accessible without manual testing.
One of the benefits of automated accessibility testing we find especially useful is that an automated test will find barriers that are repeated on multiple pages. For example, if an automated scan shows missing form labels and we manually confirm they are missing, the scan will show us each page where the error occurs allowing us to ensure we remediate every instance of the error.
We’ve posted free resources to help you learn and apply web accessibility into your workflow.
How web accessibility benefits business owners
If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. The lower the bounce rate, the longer people are staying on the website.
On the contrary, a higher bounce rate indicates a poorly constructed site. A website that ignores the importance of accessibility and lacks necessary elements would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.
Our goal is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid potential loss of customers.
How web accessibility benefits developers and Google
If your web developer argues that web accessibility does not benefit them, then it may be time to find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended.
Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:
If my website passes an accessibility scan, do I have to manually confirm everything?
Yes! Here are two examples where manual testing is always required:
- Color Contrast
Color contrast is one of the most common elements that we find gives false testing results. An automated test will compare the text color to the background color declared in the website’s styles. For example, on this page, the text color is #1761a2 and the background color is #f9f9f9. The contrast ratio of these two colors is 6.1:1 which is sufficient to pass the 4.5:1 required ratio.
Now let’s say we styled the titles on the page to look something like this:
The white text against the blue background has a contrast ratio of 6.42:1 which is sufficient. However, an automated test for color contrast would fail this element. The automated test sees the color of the text is white but it sees the page as the background of the text, not the image. So, it thinks the background is gray and does not pass. Because the automated test does not see the background image, it cannot see that the colors actually do have enough contrast.
To further complicate this, some users with cognitive disabilities prefer to disable images. When they do this, the blue graphic is removed and the text would then not pass color contrast ratios — at least as far as the automated test can evaluate. The reason for this is the automated scan does not see is that there is a 1px text shadow of #d9d9d9 which gives the text a contrast ratio of 4.55:1. Text-shadow is just one of the creative ways designers help text pass color contrast ratios. With the text-shadow implemented and with images disabled, the text would have sufficient contrast and look like this:
How do I choose a website
accessibility testing tool?
In addition to manually testing things like color contrast, you also need to include individuals with accessibility issues in your manual testing process. As mentioned previously, remember that user accessibility is about real people, so be sure to use real people with disabilities for your website testing process. While a blind user may not give you the most accurate results for color contrast testing, they will give you the most accurate results for things such as keyboard accessibility and link purpose.
- Alternative (alt) Text
Alt text is probably known as the easiest piece of accessibility to apply to a website. It’s so easy that many systems and programs even automate adding alt text. There’s that word again, automate. But don’t get too excited just yet.
While working on a PowerPoint presentation recently, I noticed PowerPoint will now autogenerate alt text for images. Here is the image I used:
PowerPoint auto-generated the alt text as “A picture containing person, man, sitting, front, motorcycle. Description automatically generated.” Close your eyes and think about that descriptive. The auto-generated description doesn’t tell you anything about that picture other than there is a man sitting.
An automated web accessibility scan is really good at telling you when alt text is present, but similar to how alt text cannot be auto-generated, the accuracy of alt text cannot be tested with an automated scan. When you review your website for accessibility, be sure you always manually review an image’s alt text for accuracy.
How do I know if automated web accessibility reports are accurate?
Now that you know you can’t completely rely on automated web accessibility scans to tell you how accessible your website is, it’s time to learn how to read the accessibility reports. In order to do this, you need to learn everything you can about creating an accessible website. We recommend the first step being to gain perspective. Check out this video of blind tech enthusiast, Daniel Amezcua, about common website accessibility barriers he faces.
Once you have a good foundation of the basic web languages and styling techniques, you will better understand how to apply the accessibility techniques outlined in the Web Content Accessibility Guidelines (WCAG). This is the next step. Embed WCAG into your mind and remember it each time you touch any aspect of your website and when you read your automated accessibility report. Pairing automated website accessibility testing with your new knowledge of website language and styles will give you the power to determine if your website is accessible and ADA compliant.
Another option is to hire an expert like Be Accessible to do all this for you. Our accessibility experts and developers already have the knowledge needed to create, remediate, and maintain an accessible website. Our website accessibility auditors will use both automated and manual accessibility testing to confirm the accessibility of your website. Our developers will fix all your accessibility errors and bring you the peace of mind that everyone, regardless of disability, has access to the information on your website.
Read more about our accessibility services, and learn how we can help you be accessible today.
Please complete all fields.
What’s new in WCAG 2.2
Version 2.2 of the Web Content Accessibility Guidelines (WCAG) is here! Find our checklist for new success criteria and the guidelines of the latest version.
Accessibility in digital marketing: Things marketers should know
Check our guide to make your digital marketing efforts accessible! Unlock the power of web accessibility in marketing ensuring inclusive and user-friendly experiences.
The importance of color contrast in digital accessibility
In order for a website to be ADA compliant, text, user interface (UI) elements, and graphics that convey information must provide sufficient contrast ratios.