How Ghost Inspector Simplifies Accessibility Testing for QA Testers

What is accessibility testing in QA?

Accessibility testing is the process of assessing websites, applications, and digital content to verify full usability for those with visual, auditory, cognitive, learning, neurological, or motor disabilities. This type of testing helps ensure that assistive technologies can be easily and smoothly assimilated into the user experience for any given web page or application.

Examples of assistive technology include:

• Screen readers
• Screen magnifiers
• Voice recognition software
• Braille displays
• Dictation software
• Text-to-Speech tools
• Optical Character Recognition (OCR)
• Augmentative and Alternative Communication (AAC) Devices
• Accessible keyboard and adaptive mouse

With accessibility testing, QA testers can quickly find and correct any problems that might prevent users with disabilities from fully using a website or application. Here are some primary obstacles to web accessibility that QA testers might run into:

1. Color contrast issues – As the most common web accessibility issue, if the contrast between the text and background colors of a webpage are not strong enough, it will prevent those with visual disabilities from interacting with your digital content.

2. Color used as only source of information – For those with visual impairments and those who use screen readers, color must not be used as the only way to indicate information on a webpage. For example, it cannot be used as the only way to highlight important text instructions.

3. Layout Issues – Mislabeled headings, overly complex page designs, tiny buttons and links, confusing error messaging, and unstructured form labels can make navigation very difficult for those with disabilities.

4. Missing alt text and tags for images, video, and audio – It’s important for visual aids to carry alternative (alt) text descriptions and tags to allow those with visual disabilities to hear descriptions of the digital content.

5. Mouse/Trackpad accessibility only – A lack of compatibility for alternatives to the mouse or trackpad can prevent those with disabilities from being able to navigate your website or application at all.

6. Lack of text wrapping – When users with low vision need to magnify the size of the text, a lack of text wrapping forces them to have to scroll horizontally and vertically to read a line of text, which makes it difficult to access information.

Accessibility testing not only ensures a stronger user experience but also helps guarantee compliance with legal standards and guidelines. Because the American Disabilities Act (ADA) does not list full regulations for web accessibility, businesses can use the Web Content Accessibility Guidelines (WCAG) to ensure that they are maintaining proper web accessibility standards. By prioritizing accessibility testing as part of the QA process, developers and companies show their commitment to inclusivity, ensuring digital equity for all users, regardless of ability.

Source: https://ddiy.co/web-accessibility-statistics/

Why is accessibility testing an important part of software testing?

According to the World Health Organization, 16% of the world’s population experience significant disability. Thus, not only is accessibility a strict legal requirement, but without proper compliance, your business also misses out on the opportunity to reach a huge population of potential users. According to Dr Ivan Noé, it’s beneficial for businesses to shift their mindsets from the medical model of disability – “the impairment is the disability” – to the social model of disability – “people are disabled by barriers in society, not by their impairment or difference.” This shift helps businesses to move the burden of responsibility for accessibility from the user to themselves, because it acknowledges that “bad design is disabling.”

Noé also explains that essential documents and resources related to government, education, healthcare, news, and work are often only available online, which means that it’s imperative for those with disabilities to have uninhibited access to the internet. Without web access, the ability to vote, pay bills, work, and connect with their local community are withheld, making it very difficult to lead an equitable life and to contribute their skills and talents to the world.

Along with emphasizing inclusion as a public value for your business, it’s important to remember that a lack of web accessibility can have dire legal consequences. When a website is not ADA compliant, it can leave the door open for lawsuits from individuals, disability advocacy groups, and even the Department of Justice, resulting in expensive legal fees, settlements, and damage to a company’s reputation. Clearly, employing a robust accessibility testing strategy is not only an ethical and equitable benefit for your company, but it helps protect it from costly consequences as well.

How does Ghost Inspector help maintain web accessibility?

Ghost Inspector is an automated software testing service designed to simplify the process of creating or recording tests for your website or application. This ensures that user activities, like adding items to a shopping cart, checking out, logging in, or submitting contact forms, function correctly. A standard Ghost Inspector test combines functional checks (to ensure actions like adding a product to the cart are executed correctly) with visual checks (to confirm the page appears as expected).

Every website is underpinned by HTML code that defines elements like text, links, images, and layout. While browsers like Google Chrome visually render this code, it’s important to remember that a significant portion of users may interact with websites differently, such as through screen readers which convey the site’s content audibly. This is why it’s essential to use accessibility testing tools to ensure that all users are able to interact successfully with your website or web application, regardless of disability.

Automated Accessibility Testing with Ghost Inspector

Imagine you’re a QA tester responsible for the quality assurance of an online store. You’d need to test the store website manually after each deployment. With Ghost Inspector, you can run automated tests to ensure that the store’s key functionalities, like adding a product to a shopping cart, are working correctly.

You can access your tests and Ghost Inspector testing tools through the application dashboard or through our recording extension for Chrome and Firefox, which allow you to record actions and convert them into repeatable tests. Let’s walk through the process of building an automated test with Ghost Inspector, and once it’s created, adding an essential accessibility testing layer.

Recording an automated test with Ghost Inspector

As a QA tester for an online store, you might start by using the Ghost Inspector extension to record the process of adding a product to the cart and verify that the ‘added to cart’ message appears as part of the test. The extension records these actions and assertions, converting them into an automated test that is sent to Ghost Inspector.

Once the test is created, Ghost Inspector runs it on our servers, using a browser to replicate the actions and produce a result with a video and screenshot for review. The test results show the functional steps, like clicking buttons and verifying messages, using selectors to target page elements. As you continue building the test, you’ll see a video on the right side of the screen replaying the steps that Ghost Inspector executed, like adding an item to the cart and verifying its presence. This video helps you review and confirm what Ghost Inspector captured during the test.

At the end of the test, you can also capture a screenshot showing the final screen that was displayed. Ghost Inspector then compares this screenshot in subsequent test runs to identify any visual discrepancies.

Running accessibility checks during an automated test

Ghost Inspector allows users to easily add accessibility checks to automated tests, giving them the ability to routinely monitor their site for accessibility issues, either on a schedule or after deployments. Users can also define the strictness of these checks, which helps manage the testing process while addressing different issues. In Chrome, you can use the Developer Tools to inspect the Document Object Model (DOM), which is the parsed form of this code. This inspection reveals elements like logos, navigation bars, and links. However, for users with visual impairments or those using assistive technologies, it’s essential that the code includes specific descriptions and navigational aids. Images should have descriptive captions, and the code should clearly differentiate between the header, main content, and footer for easy keyboard navigation.

With Ghost Inspector, you can test different parts of your application, like opening a modal or navigating to a cart page, and then run an accessibility check. When a test reveals accessibility issues, such as images lacking alternative text and color contrast problems, Ghost Inspector categorizes them by severity and provides detailed links for each violation, guiding you on how to fix them.

Once you’ve added these accessibility checks at different stages of the test, like after opening a product modal or visiting the cart page, you can run the test. Ghost Inspector will then execute the usual steps and also perform accessibility checks using the AXE library, which assesses compliance with numerous guidelines.

The test results will highlight areas of concern. For example, the homepage might pass without issues, but the product modal could fail due to missing accessible names. Ghost Inspector categorizes these issues and provides detailed information about each violation, including links to resources for fixing these issues. This process helps to  address the specific accessibility challenges your website faces.

Ghost Inspector uses the same type of selectors for carrying out actions to highlight elements that violate accessibility guidelines. If you’re familiar with our system, you can copy these selectors to identify the problematic elements directly in your site’s console. For instance, if an element is missing an ‘aria-labeledby’ attribute, you can locate and address this specific issue.

Our website accessibility testing feature is available on all Ghost Inspector plans, emphasizing our commitment to making accessibility testing accessible to everyone. You can start with basic checks and gradually increase the frequency and scope of your testing. Ghost Inspector also offers notification options, like email alerts or Slack messages, for test failures.

Manual accessibility testing with Ghost Inspector

With Ghost Inspector, you can scan a webpage, and it may show no major issues but suggest manually checking a few elements. A manual check can unveil specific accessibility issues, like revealing that the contrast between an image and the text might not be sufficient.

Your homepage may meet the basic accessibility guidelines, but it can also develop accessibility issues as users interact with it, and the underlying code changes. If you replicate the steps a user might take, such as clicking on product details to open a modal dialogue and then re-running the accessibility test, new issues can surface. For instance, the product modal might lack a proper description for screen readers. Or, adding an item to the cart and checking the cart might reveal color contrast problems or missing image descriptions. Ghost Inspector will classify these accessibility problems by severity, from critical to minor.

While manual testing using these tools is beneficial, it can be time-consuming. Maintaining accessibility is an ongoing challenge, especially with frequent website updates. This is where Ghost Inspector’s test automation becomes invaluable.

Helpful tools to use with Ghost Inspector for accessibility testing

Technical web accessibility involves ensuring the code is structured and labeled correctly to support these users. For someone just beginning with accessibility testing, a good approach is to start with basic checks using tools like Lighthouse, then gradually explore more comprehensive resources and guidelines available online. This way, you can establish a baseline for accessibility on your site and continuously improve it.

The Chrome browser also offers tools like Lighthouse for assessing various aspects of a site, including accessibility. Lighthouse generates a report that evaluates the code against accessibility standards, checking elements like ARIA (Accessibility Rich Internet Applications) attributes, which provide additional context for assistive technologies. Another helpful Ghost Inspector accessibility tool is the Axe extension by Deque Labs, an open-source library that helps identify potential accessibility issues directly within the browser.

For those new to accessibility testing, using tools like Lighthouse or Axe can be a good starting point. These tools provide an overview of common issues and help you understand why they are problematic and how to address them. It’s important to note, however, that while automated tools can detect many issues, they don’t replace the need for real user experience testing. And for a truly accessible website, consider navigating it yourself using a screen reader or keyboard to understand the user experience firsthand.

Conclusion

Digital accessibility is key to a proper QA testing strategy. The UN Convention on the Rights of Persons with Disabilities (UN CRPD) defines access to information and communication technology as a fundamental human right for those with disabilities. In the words of Dr. Ivan Noé, “Accessibility is about the people – the individuals who are behind the devices.” Businesses can ensure a fair and equitable presence online for all users by enforcing strict accessibility testing standards. Noé also recommends that businesses make it easy for individuals with disabilities to provide feedback directly to your team, leading to “a better user experience for all.”

Ghost Inspector offers a simple and affordable way to maintain high standards of web accessibility. Our automated web accessibility testing tool helps catch accessibility errors quickly, allowing QA testers to fix any barriers to accessibility as soon as they arise. For QA testers who are new to the automated testing process, Ghost Inspector’s easy accessibility checker ensures that nothing gets overlooked while running tests.

If you’d like to incorporate Ghost Inspector into your current automation testing strategy, you can schedule a free demo or sign up for a 14-day trial account here, no credit card required.