Learning targets 🧠
In this video, you will see how to: 

• Define accessibility testing
• Add accessibility checks in the Trainer
• Review accessibility test output

Review our documentation: Accessibility Testing

Why is Accessibility Testing important?

Your websites and applications should be accessible for all users, with elements like visuals, buttons, and interactions that are easy to understand and navigate. When manual testing, you may miss areas or features that do not contribute to an accessible user experience. This can lead to negative user feedback, loss of brand loyalty, or potential legal repercussions. 

Mabl's Accessibility Testing, available in Chrome on the unified runner, allows you to improve your automated test resilience and build Accessibility Checks directly into your regularly scheduled tests. Now you can finds opportunities to create a more equitable experience for all users!

What is it?

Web accessibility pertains to how universally robust, perceivable, operable, and understandable your websites, applications, and tools are for your users. In other words? It means visitors and members can equitably enjoy content on your website, regardless of ability. 

Accessibility testing is part discovery, part validation. It shines a light on areas within your websites, applications, and web tools in need of improvement to be usable for as many people as possible. Testing helps your design or implementation teams improve based on the criteria of Web Content Accessibility Guidelines.

Web Content Accessibility Guidelines are a series of standards set for developers to define testable success criteria for web content accessibility. You can read more about these standards here WCAG Levels A, AA, AAA Guidelines.

Getting Started

Accessibility checks are a part of functional UI tests. You can create tests that are dedicated to accessibility checks, or integrate these into your regular testing cadence. In this section, you’ll see how to create an individual accessibility check on a web page or element.

1. Start in the mabl Trainer and click Insert a Step. 
2. Select Accessibility - Add an Accessibility Check. 
   1. You’ll need to define your target location for this check, like a Page or Element. 
3. Tell the mabl Trainer what level of Accessibility Failure Severity you would to trigger test failure based on your Accessibility Guidelines. 
   1. These levels of Severity include:
      1. Never Fail
      2. Critical Severity
      3. Serious Severity
      4. Moderate Severity
      5. Minor Severity
4. Select “OK” 
   1. Congrats! Your Accessibility Check has been added to your Test.
5. Click “Play from beginning” at the top of the trainer to see a preview of the Accessibility Check
   
   1. Note: A trainer replay won’t kick off a full cloud run, so you won’t see any results in the dashboard yet.
6. Hit “Save” and “Close” to return to the mabl App
7. Trigger a cloud run
8. Sit back and let mabl do its thing!

Configure Accessibility Checks based on Tags or Rules

Based on your Accessibility Guidelines, you may want to trigger Accessibility Checks based on Tags or Rules. 

1. Follow steps 1-3 in “How to Create Accessibility Checks” above
2. Select “Advanced Settings”.
3. Select between Default, Tags, or Rules. 
   1. For Default, you can identify and disable certain rules. 
   2. For Tags, list the Tags that will force the rules to run. 
      1. Examples of Tags include: wcag2a, wcag111
   3. For Rules, list the specific Rules to run.
      1. Examples of Rules include: aria-hidden-focus, color-contrast 
      2. To learn more about the specific tags or rules to add or ignore, check out the rule descriptions here: GitHub Axe-Core Rules
4. Click OK
5. Make sure to hit “Save” to send your results back to the mabl Dashboard

Review Accessibility Check results in test output

While it’s important to add checks as individual tests or steps within your UI tests, you also need to know how to review the results of an individual test. Don’t worry, we’ve got you covered.

1. Start in Results tab
2. Select Results next to the individual test
1. Add a filter for “Accessibility violation”
3. Click on individual checks to review violation severity

Review high-level Accessibility Check performance

Now that you’ve seen how to review an individual Accessibility Check test result, it’s important to review your application’s accessibility performance at a high-level. Let’s do this!

1. Navigate to Accessibility. 
2. Review your Rule violations history graph
   1. Add filters to drill down to more granular results. 
   2. Identify the number of Critical, Serious, Moderate, or Minor rule violations. 
3. Select the arrow dropdown within a Rule Violation. 
4. Review the violation severity, ID, number of instances, URL path, and the violated axe-core-tag rules. 
5. Click Actions dropdown to Download screenshot, Step trace, DOM snapshot, or HTTP Archive. 
6. If you want to review Failure Documentation in a new browser window:
   1. Select overflow menu, then Rule Documentation