Skip to content

Instantly share code, notes, and snippets.

@tvararu

tvararu/internal-a11y-audit.md

Last active July 4, 2024 10:38
Show Gist options
  • Save tvararu/8752e3ec5446bfafa9224db958b48e79 to your computer and use it in GitHub Desktop.
Save tvararu/8752e3ec5446bfafa9224db958b48e79 to your computer and use it in GitHub Desktop.
Download ZIP
Internal accessibility audit template
Raw
internal-a11y-audit.md

This is a template for a Trello card consisting of a quick, internal accessibility audit. It's intended to be carried out as a prerequisite before a formal audit from a recognised accessibility testing company (like DAC).

The intention is to capture low-hanging fruit / show-stopping bugs and fix them, to allow the auditors to focus on more nuanced or interesting usability problems.

Context

We want to do an internal accessibility audit of the <SERVICE_NAME> application to surface potential accessibility issues ahead of future audits.

We want to test the following personas:

  • Blind / low vision / colour blind
  • Mobility impaired / keyboard only
  • Cognitive impaired / anxiety

We'll test with:

  • Firefox on desktop
  • Safari on iOS
  • Firefox on Android
  • VoiceOver on Safari on iOS
  • <OTHER_BROWSERS_AS_DESIRED>

It's done when

  • We've run through the service using the assistive technologies and personas
  • An automatic accessibility testing tool (Axe) is run on 5 different pages in the app
  • We've added checklist items, a comment, or cards to this story with any bugs found

Who knows about this

<PERSON_WRITING_THIS_CARD>

Checklist

  • Check that the skip link works
  • Check that the heading hierarchy is correct on every page
  • Check that inputs have working labels on every page
  • Check that all pages have unique titles
  • Check that all validation message links work
  • Check that Error: is prefixed to every page when validation errors show
  • Check that the whole journey can be completed using only a keyboard
  • Check that the whole journey can be completed using a screen reader and a switched off screen
  • Check that an automated tool like Axe finds no major issues
@tvararu
Copy link
Author

tvararu commented Jul 4, 2024

Quick accessibility testing cheat sheet

If you have time:

  • Read the whole WCAG 2.2 spec
  • For each criteria, consider the user journeys and whether they apply

If you don't:

  • Run the Chrome/Firefox accessibility audit (Lighthouse)
  • Run aXe
  • Turn on black/white, inverse, and high contrast filters from OS settings
  • Check if the site has a skip link
  • Check if every page has an H1
  • Check that forms have inputs with clear labels
  • Navigate via keyboard through the whole website and complete a user journey
  • Navigate via VoiceOver (⌘ + F5, see cheat sheet below) and complete a journey (bonus: turn off your screen)

VoiceOver cheatsheet:

Ctrl Opt VoiceOver key (VO)
VO Cmd Shift arrows Speech settings
VO -/= Volume up/down
VO Shift down/up Enter / exit inner content
VO u Web rotor
VO h VoiceOver help
VO m d D Menu, Dock, Desktop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment