Accessible Website Auditor

A screen-reader-friendly workflow tool for blind and low-vision website testers.

View Website
   
Client
Detroit Disability Power
Project Type
Product Design
Date
Jan 2021
 - 
Apr 2021
Services
Product Design, UX Research

Project Overview

My team worked with Detroit Disability Power, a Southeast Michigan advocacy organization, to develop a solution to assist blind and low vision website accessibility testers. Working closely with the local blind and low-vision community, we produced a design for software called Accessible Website Auditor (AWA), an extension for Google Chrome.  Unlike many popular accessibility auditing solutions, such as WAVE and AXE, AWA was designed with screen reader users in mind. 

The design of AWA includes:

  • A screen-reader-accessible auditing process that uses the targeting of the screen reader to report specific problematic HTML elements
  • A full HTML-based tutorial that teaches how to use AWA and allows new users to practice
  • Interfaces for reviewing and editing any issue reports before audit completion
  • Exporting of accessibility reports to a webmaster via email
A mockup of the AWA tutorial. The software is prompting the user to report an image without alt text by pressing R.
The AWA tutorial and reporting interface in action!

Project Execution

AWA is the product of an exploratory design process that began with interviews with accessibility experts and members of the blind and low-vision community. These interviews helped our team determine the shortcomings of existing accessibility auditing software, and helped us better understand what it is like to browse the internet with a screen reader.

Categorization of many tiny colorful sticky notes bearing anonymized interview data..
Analysis of anonymized interview results to determine strengths, needs, and product requirements.

We produced a medium-fidelity HTML prototype of AWA and its associated tutorial, then conducted usability tests of the prototype with screen reader users to test our assumptions. These tests revealed important considerations for our final design, like the fact that keyboard shortcuts are sometimes intercepted by screen reader programs. Adjustments based on these insights were implemented in our high-fidelity final prototype.

A mockup of the reporting interface for Accessible Website Auditor. Currently, the auditor is entering the client's email to submit their report.
The report review and submission interface of AWA


Results

With convenient one-click element annotation methods and automatically-compiled reports, AWA is a comprehensive auditing tool that helps screen reader users conduct accessibility audits and share their expert feedback with website administrators.

Detroit Disability Power plans to submit the design created by our team to be implemented by engineers, at which point the project will support blind and low-vision website auditors everywhere.