dequelabs / get-it-right-the-first-time

Axe-Con 2022: Get It Right the 1st Time: Stop 80%+ of A11Y Bugs During Development

• axe-con session
• accessible slides

This is an example project with some baseline a11y issues to help demonstrate how to effectively use axe DevTools automated testing and Intelligent Guided Testing to prevent 80% of a11y bugs during development.

Prerequisites

• node - Node 16 or greater
• axe DevTools Extension - Chrome · Edge · Firefox (only automatic testing supported)

Setup

Installation

With npm

npm install

With yarn

yarn install

Running

The following commands are available:

• npm run build - builds the website to the dist folder
• npm run watch - watches live code changes and spins up a server

Running npm run watch will build and spin up a live server at http://localhost:10001. Changes made in any of the project files will automatically be live reloaded in the running web app.

Walk-through

The code example contained in this app is built in preact, a smaller alternative to React but with the same set of APIs.

Structure

• src/index.tsx - Application entry point
• src/assets/css - All the styles used by the different sections of the app
• src/assets/images - All the images used by the different sections of the app
• src/components - All the various components used by the different sections of the app

Accessibility Issues

This is a fictional site with some accessibility issues for demonstration purposes only. Below are some examples of intentional accessibility issues along with the remediation steps hidden behind a expand/collapse element:

Automated Testing

The following accessibility issues should be raised from the axe DevTools extension:

• 2 - Elements should have sufficient color contrast: color-contrast
• 3 - Elements should not have tabindex greater than zero: tabindex

How to remediate the above issues

To resolve the color contrast issue, change the value of --accent-alt-color in src/assets/css/variables.css to a passing accessible color on a #ffffff background. Example: from #1998fa to #055a9e.

To resolve the tab index issue, remove the tabIndex="1" attribute on the button element from src/components/Order.tsx

Intelligent Guided Testing

The following accessibility issues should be raised from each tool:

Interactive Elements

• 1 - The element's roll is missing or incorrect
• 2 - States/Properties: The element has missing or incorrect states or properties

How to remediate the above issues

To resolve the missing/incorrect role, change the div element with an onClick attribute in the AccordianPanel component from div to button in src/components/Faq.tsx.

To resolve the missing/incorrect state, add aria-expanded={showDescription} to the same element from before in src/components/Faq.tsx.

Structure

• 1 - Visual heading text is not marked as heading

How to remediate the above issue

To resolve the missing heading, change the "What's Popular" div element from div to h2 in src/components/Faq.tsx.

Keyboard

There should be no accessibility issues raised as any potential issues should be resolved by prior remediation fixes.