Skip to content

Instantly share code, notes, and snippets.

View marcysutton's full-sized avatar

Marcy Sutton-Todd marcysutton

View GitHub Profile
@marcysutton
marcysutton / sample.scss
Created May 7, 2015 20:29
Angular Material CSS Best Practice
// Brittle:
md-dialog {
&> md-dialog-content {
}
}
// better:
md-dialog {
.custom-dialog-content {

The Pacific Northwest conference CascadiaJS grew into something new and amazing this year: a 3-day web conference now called Cascadia Fest. Following the JS Fest format, talks were grouped into server and browser JavaScript days, and a brand-new CSS day. 400 attendees and their families along with speakers and volunteer staff came to the beach for 34 talks and 6 free workshops at Semiahmoo Resort, across Birch Bay from Canada. The venue was right between Vancouver BC and Seattle, both previous locations, as well as Portland.

Cascadia Fest awarded 10 diversity scholarships this year, making a big impact in the community. As Northwest native, I love the message & perspectives at Cascadia Fest: common themes reflect the community’s values. Speakers talk about compelling side projects and talking through the learning process, while admitting vulnerability. They enlighten us about being polite citizens in open source and beyond, elevating our skills, and investing in our careers an

@marcysutton
marcysutton / the-deal.md
Last active May 3, 2016 00:07
Accessibility Support in HTML5 Audio

Here are a few things I found in testing HTML5 Audio in various browsers and screen readers:

  • The controls do work in Safari and Voiceover, they just require more key commands than "space". You have to press Control + Option + Space to toggle playback.
  • I had trouble toggling playback in Safari and Chrome with just the keyboard.
  • Mobile Safari and Voiceover worked fine.
  • Firefox and Edge both work from the keyboard alone
  • Firefox and JAWS required two taps of the space key.
  • Edge and JAWS did not work at all–probably because of immature accessibility support in the new browser.
  • Labeling the audio element with an aria-label attribute would help to give the track a title. It won't work in every browser due to accessible name calculation specs, but it's better than none.
@marcysutton
marcysutton / gist:13929e9933ad96090817b61d0f921fc8
Last active March 2, 2020 19:46
Accessibility and Performance Sitting in a Tree...

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

@marcysutton
marcysutton / package.json
Last active June 6, 2016 21:43
Microsoft Edge Testing with aXe
{
"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 / chrome-a11y-experiment-instructions.md
Last active January 31, 2023 22:07
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: 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 / axe-core.d.ts
Created July 19, 2016 00:34
Typescript attempt #1
// 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 / enzyme-test.js
Last active August 23, 2021 08:20
React A11y Testing
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 = {};
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 / merging.md
Last active November 29, 2016 23:46
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: