Skip to content

Instantly share code, notes, and snippets.

Marcy Sutton marcysutton

View GitHub Profile
marcysutton / example-page.js
Last active Apr 10, 2020
Gatsby Sass Recipe
View example-page.js
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import "./styles.scss"
const SecondPage = () => (
<SEO title="Page two" />
marcysutton /
Last active Jun 25, 2018
Accessible UIs - State of A11y

How to accessibility!

Definition of done


  • Awareness
  • Design and UX
marcysutton /
Last active Mar 15, 2017
Accessibility Github Issue Template

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: {
marcysutton /
Last active Nov 29, 2016
Bitbucket merge hell

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>',
marcysutton / enzyme-test.js
Last active Oct 7, 2019
React A11y Testing
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 = {};
marcysutton / axe-core.d.ts
Created Jul 19, 2016
Typescript attempt #1
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 {
marcysutton /
Last active Nov 19, 2019
Enable Chrome Accessibility Experiment

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more:

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:

marcysutton / package.json
Last active Jun 6, 2016
Microsoft Edge Testing with aXe
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",
You can’t perform that action at this time.