Getting started with accessibility testing

Accessibility is an important part of the user experience, ensuring that all users, including users with disabilities, can understand and interact with your application.

For example, think about a person using a screen reader who visits your application:

• Does the page display the information they need?
• Do the images include an alt text description?
• If there is a form, does it include label elements to help them understand what information they need to provide?

In mabl, you can add accessibility checks to existing browser tests to validate whether your application conforms to established accessibility guidelines, such as providing alt text for images and adding label elements to forms. The output of accessibility checks helps your team understand the overall "accessibility quality" of your app and identifies ways to make your application more inclusive for all users.

This guide outlines first steps for accessibility testing in mabl.

Before you start

Web accessibility is a vast and nuanced topic. Before you try accessibility testing in mabl, keep in mind the following points for context:

1. Building an accessible application is a team effort. Everyone should be involved in the process.
2. Testing is only one part of the accessibility process. By planning and designing with accessibility in mind, you can avoid committing basic errors and having to redo work later.
3. Automated accessibility testing is not enough to ensure that your application is accessible. Manual accessibility testing can help surface issues that automated accessibility testing cannot, such as the overall order and coherence of your application for a person who navigates the site with a keyboard.

How to start accessibility testing in mabl

Add an accessibility check

To add an accessibility check to an existing browser test, take the following steps:

1. In the mabl app, click on Tests.
2. Click on a browser test to open the test details page.
3. Click on the Edit test button and select Launch Trainer.

Opening an existing test in the mabl Trainer

4. In the mabl Trainer window, click and drag the step cursor to be after the default Visit URL assigned to variable "app.url" step.

5. Click on the plus sign at the bottom of the Trainer window to add a new step.

6. Select Accessibility
7. Set the target to "Page" so that you can check the entire home page.
8. Set the failure criteria to "Never fail" for this first accessibility check. When you learn more about your application, you may set more specific failure criteria.

9. Click OK.
10. Save your test and close the mabl Trainer.

Run the accessibility check

To see the full results of the accessibility check, run the test in the cloud:

1. On the test details page, click on Run test.
2. Select the Cloud run tab.
3. Click on the Start 1 run button to trigger the test.

Review the results

You can find the results of your accessibility check on the test output page:

1. Click on the test run status - "Running", "Passed", or "Failed" to open the test output page.
2. Click on the "Run an accessibility check" step to review the results of your accessibility check, including an overall pass rate and specific violations.

Output from an accessibility check

Each violation includes:

• Help: A link to documentation on how to fix the issue and why it matters
• Element info: The target element where the violation was detected
• Failure details: Suggestions for fixing the violation

Accessibility check violation details

Next steps

If it's your first time running an accessibility check and there are a lot of issues, don't worry. The aim is to improve your application a little bit every day.

Here's an approach you can take to fix accessibility issues:

• Prioritize: Accessibility issues are categorized according to severity. Start by addressing critical accessibility violations first.
• Investigate the violation: If you don't understand the accessibility guideline, click on the "Help" link to review documentation.
• Collaborate: Share the failure details from the accessibility check with your team and identify how to fix the issue.
• Set a threshold: Work with your team to determine the level of quality that you can maintain on a regular basis.

As you start to understand the quality of accessibility in your app, you can:

• Customize your accessibility checks to target specific elements or fail if there are violations that exceed a certain level of severity
• Set a threshold on the accessibility dashboard

For more information on accessibility testing, click here.