Skip to content

Instantly share code, notes, and snippets.

Marcy Sutton marcysutton

Block or report user

Report or block marcysutton

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@marcysutton
marcysutton / accessible-uis.md
Last active Jun 25, 2018
Accessible UIs - State of A11y
View accessible-uis.md

How to accessibility!

Definition of done

Education

  • Awareness
  • Design and UX
@marcysutton
marcysutton / ISSUE_TEMPLATE.md
Last active Mar 15, 2017
Accessibility Github Issue Template
View ISSUE_TEMPLATE.md

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'
require('load-grunt-tasks')(grunt)
grunt.initConfig({
mochaTest: {
test: {
options: {
@marcysutton
marcysutton / merging.md
Last active Nov 29, 2016
Bitbucket merge hell
View merging.md

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 = [
'<html>',
'<body>',
'<p>An image without an alt tag! <img src="some.jpg" /></p>',
'<h2>Not an h1</h2>',
'<h5>blabla</h5>',
'<h4></h4>',
@marcysutton
marcysutton / enzyme-test.js
Last active Mar 21, 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 () {
this.timeout(10000);
it('Has no errors', function () {
let config = {};
@marcysutton
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: https://github.com/dequelabs/axe-core
// Definitions by: Marcy Sutton <https://github.com/marcysutton>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare const enum Tags {"wcag2a", "wcag2aa", "section508", "best-practice"}
declare const enum Reporter {"v1", "v2"}
interface ElementContext {
@marcysutton
marcysutton / chrome-a11y-experiment-instructions.md
Last active Jul 28, 2019
Enable Chrome Accessibility Experiment
View chrome-a11y-experiment-instructions.md

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: https://developers.google.com/web/updates/2018/01/devtools#a11y


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
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",
@marcysutton
marcysutton / gist:13929e9933ad96090817b61d0f921fc8
Last active May 5, 2016
Accessibility and Performance Sitting in a Tree...
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!

##Glossary

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

##Transcript

You can’t perform that action at this time.