A tour on website accessibility testing: manual and automated

Website accessibility testing has come into the limelight in recent years, and it is here to stay.

After all, the fact that website accessibility is important for business is becoming an axiom of the digital age we live in.

Our web agency cares about accessibility, so we want to share more information about it. Let’s discuss what accessibility testing is, why it is important, how it is done, and what accessibility testing tools are available. We will lay a special focus on manual & automated accessibility testing: which is better and why.

What is accessibility testing for websites?

Website accessibility testing is a subset of website usability testing aimed at making sure your website is easy-to-use for people with disabilities. This includes visual, hearing, motor, speech, cognitive and other kinds of impairments. Regardless, everyone should be able to perceive, understand, navigate, and interact with your website without any stumbling blocks.

The importance of accessibility testing

When your website is launched, redesigned, or enriched with new features, it should be impeccable before being released to the market. This is what testing is for! Including accessibility testing into your website’s testing cycles is vital — here’s why:

• From the start, you show that you care about your users and respect the best practices. This shows the quality of your brand.
• Accessibility testing makes your site usable across millions of people, which brings more traffic and conversions. This also includes users with outdated software, poor infrastructure, non-standard equipment, restricted access, computer illiteracy, and so on.
• You are protected against accessibility lawsuits based on the ADA (Americans with Disabilities Act), which are on the rise today.
• Your SEO rankings grow due to numerous similarities in being ready for assistive software and being ready for search engines.
• You are on the verge of innovation because website accessibility paves the way to the support of AI technologies.

How to do accessibility testing?

To “measure” a website’s accessibility, QA engineers are guided by the WCAG 2.1 (Website Content Accessibility Guidelines) brought to us by the World Wide Web Consortium. They cover multiple aspects of the user’s interaction with a website.

We can single out two key types of accessibility testing: manual and automated accessibility testing. Each of them has its own advantages. The best approach is to combine an extensive manual examination combined with the automated testing of specific features or elements. Let’s learn more about each type.

Manual accessibility testing

In manual accessibility testing, QA experts systematically go through individual pages checking their compliance with WCAG. This includes checking both the UI and the code. Their experience and knowledge of web accessibility standards allow them to quickly spot weak points that can create barriers for users with disabilities.

QAs literally put themselves into the shoes of users who need to rely on alternate tools to access the website. They use their human judgment, which is priceless and cannot be replaced by any machines. Its drawback is in being a little bit time-consuming, but it is solved by combining it with automated testing.

Here are a few examples of how accessibility can be tested manually:

• Unplugging the mouse. The QA makes sure all controls, links and menus are available via the keyboard navigation only, which is vital for users with motor control disorders and low vision.
• Turning off the website’s images. A QA can assess whether the content still makes sense and the disappearance of images has influenced the understanding or turned off some important controls.
• Turning on the high contrast mode. A QA turns on the high contrast mode of the operating system that is often used by people with visual impairments. They see how convenient the website’s color scheme becomes in this mode.
• Checking for captions or transcripts. If your site has video and audio, QAs check for their possible text alternatives like captions and transcripts, as well as controls in the player that turns them on.
• Checking the form field labels. It is also necessary to check whether your website’s forms fields have labels that are informative and provide for the proper error handling. Clicking in the labels should provide the appropriate controls (going into a field, checking a radio button, etc.).
• Filling out forms at a slow speed. For many users, more time is necessary to perform the standard steps like filling out a form. A QA does this slowly on purpose and checks whether it’s possible without losing the previously entered data, etc.

Automated accessibility testing

Automated accessibility testing involves using robust automated testing tools. It is a huge help because it allows QA engineers to quickly process big volumes of information (automatically spotting missing ALTs, page titles, form labels, and so much more). With automated accessibility testing, you know instantly whether a particular website component has passed or failed the test. It gives detailed reports with useful recommendations.

However, accessibility testing tools are sometimes able to generate false positives or give warnings that require interpretation. Often automated testing draws a QA’s attention to particular issues that may need further investigation.

This is just further proof of the fact that only the combination of automation and manual accessibility testing brings the best value.

Accessibility testing tools

Here are some of the useful tools for accessibility testing that quickly evaluate web pages for various accessibility aspects:

1. WAVE
2. Axe
3. Taw
4. Tota11y
5. Color Contrast Analyzer
6. Lighthouse

Let’s discuss how they work in a little more detail.

WAVE

The WAVE Web Accessibility Evaluation Tool is helpful in discovering web accessibility issues. It works online so you only need to enter a web page URL in the field. WAVE is also available as a Chrome or a Firefox extension. WAVE checks web pages for Web Content Accessibility Guideline (WCAG) errors that are known to have an impact on the user. Its capabilities include checking password protected, locally stored, and dynamic web pages.

Axe

Axe is a popular accessibility testing tool for web or Android applications. For web testing, it is available as a Chrome extension. Axe helps development teams identify and resolve common accessibility issues. Axe can be run for testing a single page or hundreds of thousands of pages thanks to easy inclusion in automated test suites. It generates reports with a list of accessibility issues with detailed explanations, built-in references, and solution patterns.

Taw

TAW is an automatic online website accessibility checking tool. It shows the degrees to which web accessibility is achieved in a website’s design (WCAG A, AA, or AAA level). The TAW logo with the evaluation result can be embedded into a website. TAW groups its results based on the four principles of WCAG for interfaces and content: perceivability, operability, understandability, and robustness. The tool lists automatically checked issues that should be solved, as well as possible manual ones that need human input to be confirmed or discarded.

Tota11y

The Tota11y tool is named after the word “a11y” widely used as an abbreviation for “accessibility.” The tool provides a visualization of how your site works with assistive technologies. In essence, it is a single JavaScript file that adds a small button at the bottom of a web page. In addition to pointing out the most common accessibility errors, it suggests fixes tailored to your page.

Color Contrast Analyzer

The Color Contrast Analyzer is helpful for testing the readability of text and the contrast in your website’s visual elements. It has WCAG 2.1 compliance indicators. The tool offers several ways to set colors, a color blindness simulator, and more.

Lighthouse

The Lighthouse is an open-source automated testing tool for improving the quality of web pages. You submit a URL to it, and it runs a series of audits with subsequent reports. This embraces the selected aspects of website’s work, one of which is accessibility. For example, it checks if buttons have accessible names, documents have titles, forms have labels, images have ALT attributes, etc. It can be run in Chrome DevTools, from the command line, or as a Node module.

Order professional website accessibility testing

Automated tools and human understanding are a great combination for accessibility testing. Our web agency’s QA engineers are ready to use the combination of manual and automated website accessibility testing to thoroughly check your website for compliance with the guidelines.

It’s accessibility time — follow the best practices and you will see the result!