Introduction

This guide will walk you through how to use axe DevTools to run a basic scan on your Ensemble pages to identify Accessibility Issues.

Video Guide

Written Guide

Instructions

Before You Start:
If you don't already have the axe Devtools Browser Extension installed, please go look at our axe Devtools installation video guide.

Step 1 - Open axe DevTools on Your Page

Open up the live version of the Ensemble page that you want to scan, right-click on the page, and select Inspect from the pop-up menu.

The Developer Tools window will open. Find the axe DevTools extension by looking in the top menu bar (1), or by clicking on the More tabs arrow (2). Click on axe DevTools (3) to open the extension.

Step 2 - Run a Scan

Once the axe DevTools browser extension window opens, select Full Page Scan to run a scan of your page.

After axe DevTools has finished analyzing your page, it will display the scan results in the next window. You will see the Total Issues (1) displayed, followed by all of the issues grouped together by Issue Type (2). 

Step 3 - Locate Individual Accessibility Issues on a Page

When you are ready to start finding individual accessibility issues to fix, click on on of the Issue Type Groups. This will show you a list of each of the individual issues in that group.

You can scroll through the list of issues using the next issue/previous issue arrows (1). When you land on an individual issue that you want to locate on the page, click the Highlight button (2). This will scroll to the area on your page where that particular issue is located, and highlight it for you (3).

From here, you can navigate to this area of your page in the Ensemble editor and start fixing the issue.

Note: More in-depth steps for specific accessibility issues (such as color contrast, accessible link text, etc.) are covered in our guides about each specific issue, which you can find links to on our landing page.