Accessibility Testing - aXe Browser Extension
Tags: a11y, testing, webdev
Published: 2018-09-14 16:37:33

---
title: Accessibility Testing - aXe Browser Extension
published: true
tags: A11y,Testing,WebDev
canonical_url: https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/
cover_image: https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/cover-a11y-axe.jpg
---

Inspired by the [syntax.fm podcast episode](https://syntax.fm/show/072/accessibility) on [website accessibility (a11y)](https://en.wikipedia.org/wiki/Computer_accessibility), I decided to try out the [aXe](https://www.deque.com/axe/) browser extension created by [Deque Systems](https://www.deque.com). Though Wes and Scott mention several interesting tools, this one appealed to me because it sounded both robust and easy to use.

To give aXe a test drive I decided to use the open source project [QIT](https://qit.cloud/). I recently started contributing to this project, so it seemed to be a natural fit. QIT is a progressive web app (pwa) that allows you to search software development podcasts by topic. It is the brainchild of [Joe Zack](http://joezack.com/), one of the hosts of the [Coding Blocks podcast](https://www.codingblocks.net/), that was brought to life by him and [members](https://github.com/codingblocks/podcast-app/graphs/contributors) of the [Coding Blocks slack channel](https://www.codingblocks.net/slack/). If you have not checked out the Coding Blocks podcast or slack channel, I highly recommend that you do.

## Setup

Axe has a few different ways it can be used but for this article I will be using the aXe for Chrome browser extension. Setup is very easy. Just install the [axe extension for Google Chrome](http://bitly.com/aXe-Chrome) from the chrome web store.

## Test execution

![Running the aXe tests](https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/run-axe-test.gif)

Testing a web page is also really easy:

1. Navigate to the page you want to test
2. Open Chrome’s DevTools (Control + Shift + I)
3. Select the aXe tab
4. Click the ANALYZE button

Let’s go ahead and run the tests against the QIT main page and take a look at the results.

## Inspecting the results

![The aXe tests results](https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/qit-axe-results.jpg)

Axe does a really good job at not just identifying the issues but providing everything you could possibly need to fix the issues.

- A description of the issue
- The impact rating of the issue
- Toggles to highlight or inspect the issue in the page
- A list of ways to resolve the issue
- A link for learning more about the issue

## Now what?

Wow that’s great. I found four a11y issues in a matter of minutes but what’s the point if I don’t fix them! Before jumping in, I should be a good developer and create issues for them on the [GitHub project](https://github.com/codingblocks/podcast-app). And since I recently read Sung Kim’s ([@SlightEdgeCoder on Twitter](https://twitter.com/SlightEdgeCoder)) article:

{% link https://dev.to/dance2die/providing-a-better-github-issue-experience-fgh %} 

Why not great a custom issue template for accessibility issues?

![Thanks for the emoji recommendations Sung Kim!](https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/qit-a11y-issue.jpg)

Now that the issue is recorded, it’s time to fix it.

## The fix

![A11y fix by adding aria-label attribute](https://davefollett.io/2018/09/13/accessibility-testing-axe-browser-extension/qit-a11y-fix.jpg)

This particular accessibility issue can be fixed by adding an [aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) to the `<input>` element. In addition to fixing the issue, it also does not alter the original look of the `<input>` element. Though a better solution might be to redesign the page to use `<label>` element that is associated with the `<input>` instead of using the `aria-label` attribute. I will leave that for another day and take the small win of making the site slightly better for accessibility than it was before.

## Resources

- [Syntax.fm podcast episode 72](https://syntax.fm/show/072/accessibility)
- [Deque Systems webpage for aXe](https://www.deque.com/axe/)
- [aXe for Google Chrome extension](http://bitly.com/aXe-Chrome)
- [QIT Podcast searching website](https://qit.cloud/)
- [QIT GitHub project webpage](https://github.com/codingblocks/podcast-app)