Working with Accessibility violations

Mesmer provides an accessibility feature to check if your mobile application conforms to mobile accessibility standards.

Here are some of the ways you can use Mesmer's accessibility feature:

  • during a crawl for the first time after uploading your application build when creating a new project;

  • executing another crawl in the App Map; and

  • running the Accessibility Bot.

The following sections below discuss each one of them.

Crawling for the first time

One way you can use the accessibility feature of Mesmer early on is during your first-time crawl. After you've created a new project and completed the upload of your application's build, you can then opt to include an accessibility check for your crawl. You do this by checking the Accessibility option in the Select Crawl Type selection.

The Accessibility option

Once Mesmer starts crawling your application and begins discovering screens, it will check all objects inside each screen and see if they have accessibility violations. After the crawl finishes, the Accessibility panel becomes visible in the Drawer, and this is where the violations are listed.

The Accessibility panel's icon in the Drawer

👩🏫Note: When running a crawl that includes an accessibility check, the Accessibility panel becomes visible as soon as the crawl starts. It's disabled by default, and you'll have to wait until the crawl finishes before interacting with it.

Running another crawl

Assuming you didn't include the Accessibility option during your first crawl, you can run another crawl to now include it. To run another crawl with an accessibility check:

  1. Ensure you are on the Your App Map screen. If not, click the App Map menu on the toolbar.

  2. On the Your App Map screen, click the three-dotted ... menu located at the right, just next to the Replay Crawl menu button.

  3. Click Run Crawl to start another crawl.

  4. This time, include the Accessibility option in your crawl configuration by checking it.

  5. Complete the configuration and start the crawl by selecting a device and specifying the crawl duration.

Once the crawl finishes, check the Accessibility panel to review your application's accessibility violations.

Running another crawl in the Your App Map screen

Using the Accessibility Bot

The most flexible way to use Mesmer's accessibility feature is to run its Accessibility Bot.

To run the Accessibility Bot:

  1. Click the Accessibility panel on the Drawer.

  2. Click the three-dotted ... menu at the right-top portion of the panel.

  3. Click Run Accessibility Bot.

  4. Select the accessibility policy that the crawl will use and will apply to your application.

  5. Click Run to start the crawl.

Like what happens after a crawl finishes, any accessibility violation will be listed in the Accessibility panel.

Using the Accessibility Bot to run another accessibility check

The Accessibility panel

Locating and working with the Accessibility panel

This is the panel you'll use in Mesmer when it comes to handling your application's accessibility violations. Regardless of how you use Mesmer's accessibility feature (e.g., running another crawl or thru the Accessibility Bot), you can be sure that all of your application's violations — if there are any — are listed here. The panel also provides the following functions, all part of Mesmer's accessibility feature:

  • Run Accessibility Bot: Starts an accessibility crawl that looks for accessibility violations in your application.

  • Policy Configs: This is where you define or choose the policy to use for your accessibility check. You can use the default Web Content Accessibility Guidelines (WCAG) 2.1 or create new versions based on it using your modified or relaxed rules. Accessing this function is the same as clicking Compliance Configs in the settings menu.

  • Generate Report: Generates a downloadable report based on your accessibility violations. It redirects you to the Execution Reports screen, where you can browse and download previously generated reports. Accessing this function is the same as clicking Reports in the settings menu.

  • Accessibility Debug: Begins a debugging mode in Mesmer where you can individually navigate the objects of your application's screens and review their accessibility-related information and violations. This function also allows you to manually add a violation to an object or remove an existing one from it.

We'll now discuss how Mesmer presents the accessibility violations and the various tasks you can do with them individually or as a group.

How a violation is described

Your application can either have one or more violations or none at all, depending on how Mesmer test it against the currently enabled accessibility standard (starting a crawl) or chosen policy (doing a change policy). Each violation is presented in a card-like design and includes the following information relevant to the violation:

  1. In bold format, the rule or success criteria that one or more objects in your application violated. The rule is based on and enabled on the policy you're currently using.

  2. At the top of the rule are the policy name, guideline number of the rule, and its conformance level. The guideline number and the conformance level are based on the policy you're using.

  3. At the right is the severity specified for the rule. Later on, when configuring your policy, you can change the severity of its rules based on how strict you need to comply with them.

  4. The number at the upper left represents the number of objects involved in the violation.

Sorting & filtering

You can sort your listed violations using the Sort by dropdown. Various criteria for sorting are available, but only one can be used at a time.

On the other hand, you can filter your violations to narrow down your list to display specific ones. You can filter by severity, conformance level, or by marked value using the Show dropdown. Unlike sorting, you can combine multiple criteria when filtering your violations.

Sorting and filtering your violations

Marking violations

Once you've understood your application's violations and know how to manage them, the only thing left for you to do is to mark them.

Below are the steps on how to mark a violation, be it one or many:

  1. Select a violation (can be one or more) to mark by clicking on its associated checkbox. Regarding the checkbox, it's the styling that makes it appear round in shape😁.

  2. Click the Mark label located at the right corner, and then select the value (e.g., Passed, Alert, and Defect) you want your violation labeled or marked with. Besides marking, you can also create Jira issues or report the violation to Mesmer as inaccurate.

Marking is finished if the icon associated with the value is displayed in the violation's card. You can also quickly select and mark all violations in one go using the checkbox beside the Sort by dropdown.

Marking one or more violations

Creating a Jira issue

👩🏫Note: This function is only available and relevant to you if you have already configured Jira integration in your Mesmer account. If you haven't done so, you won't be able to follow the instructions here.

Since Mesmer integrates with Jira, you can create Jira issues from your accessibility violations. The issues will be created in the Jira project name specified in your Mesmer account's Jira configuration. All relevant information (per object) about a violation will be included in the created issue.

Here's how to do it:

  1. Select one or more violations you want to create Jira issues with.

  2. Click Mark, and then click Create Issue.

  3. Wait until the process completes. The indicator to know if the process has complete is when a Jira diamond-like🔹icon appears in your violation's card.

  4. Check your Jira project and review the issues created there.

Creating Jira issues from one or more violations

Changing policies

If you need to test your application for violations using other policies, click the Change label at the right. Select the one that you want to apply to your application, and then click Run. The Accessibility panel will refresh and remove your violations from the previous policy and then list the new violations from the recently selected one.

Changing policies in the Accessibility panel