Instantly share code, notes, and snippets.

Marcy Sutton marcysutton

View GitHub Profile

How to accessibility!

Definition of done


  • Awareness
  • Design and UX

Issue Description

// What is the nature of the issue? Which browser and/or Assistive Technology?

How to reproduce / Current behavior

// Step-by-step instructions explaining how to reproduce the problem. Environment required, explicit identification of the component in question

How to validate (Acceptance Criteria) / Expected behavior

// A set of assumptions which, when tested, verify that the accessibility requirement was met.

Additional information

View Gruntfile.js
module.exports = function (grunt) {
'use strict'
mochaTest: {
test: {
options: {

Merging a pull request

To apply a pull request, make sure your local develop branch is up to date. Then, create a new branch for that pull request:

git checkout -b some-user-feature

Run the following commands to apply all commits from that pull request on top of your branch's local history:

View gist:c221a5b855bccbfd32bc7442738e3d49
var jsdom = require('jsdom');
// Some html page
var html = [
'<p>An image without an alt tag! <img src="some.jpg" /></p>',
'<h2>Not an h1</h2>',
View enzyme-test.js
import {expect} from 'chai';
import App from '../app/components/App';
import a11yHelper from "./a11yHelper";
describe('Accessibility', function () {
it('Has no errors', function () {
let config = {};
View axe-core.d.ts
// Type definitions for axe-core 2.0.5
// Project:
// Definitions by: Marcy Sutton <>
// Definitions:
declare const enum Tags {"wcag2a", "wcag2aa", "section508", "best-practice"}
declare const enum Reporter {"v1", "v2"}
interface ElementContext {

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

  1. Go to chrome://flags/#enable-devtools-experiments to enable Devtools experiments Chrome flags with Developer Tools Experiments enabled
  2. Open developer tools, go to Setting
View package.json
"name": "axe-webdriverjs-demo",
"version": "1.0.0",
"description": "How to set up aXe with WebdriverJS for automated testing.",
"scripts": {
"postinstall": "./node_modules/.bin/jasmine init",
"test": "./node_modules/.bin/jasmine spec/test.js"
"author": {
"name": "Marcy Sutton",
View gist:13929e9933ad96090817b61d0f921fc8

A snippet of an archived email conversation between accessibility professionals: George Zamfir, David Newton, Henri Helvetica, Monica Piotrowicz, Alice Boxhall and Tim Kadlec. I have noted who I thought was speaking, but it was hard to tell from the thread. Please comment if I can update the attribution!


  • SR = Screen reader
  • AT = Assistive technology
  • a11y = Accessibility
  • VO = Voiceover