Skip to content

Instantly share code, notes, and snippets.

Avatar

Marcy Sutton marcysutton

View GitHub Profile
@marcysutton
marcysutton / gist:cc310fc7d4682c3cb02d
Last active Aug 29, 2015
Personalization for Accessibility
View gist:cc310fc7d4682c3cb02d

Personalization for Accessibility

I'm looking for web apps or online experiences that offer personalization options to users with the intent to improve accessibility, such as increased font-size, variable color scheme or layout (for example, always give me mobile). Thoughtful implementations would persist after users leave the site, so their desired settings would still be there when they came back.

Trello has an "Enable Color Blind Friendly Mode". It's pretty simplistic and probably not that useful, but their hearts are in the right place.

Have you seen any applications that do well with this type of offering?

Trello settings screenshot highlighting the Enable Color Blind Friendly Mode

View gist:2b56bb2832395eb0978b
a, button
&:hover, &:focus
color: orange
.profile-list-item
&.selected
background-color: $dark-gray
View gist:2103dbe2e904f3e875ba
.warning
color: red
&h1
background-color: white
padding: 1em
text-align: center
@marcysutton
marcysutton / radioButton.spec.js
Last active Aug 29, 2015
Angular Material Radio Button Spec
View radioButton.spec.js
describe('radioButton', function() {
beforeEach(module('material.components.radioButton'));
it('should set roles', inject(function($compile, $rootScope) {
var element = $compile('<material-radio-group ng-model="color">' +
'<material-radio-button value="blue"></material-radio-button>' +
'<material-radio-button value="green"></material-radio-button>' +
'</material-radio-group>')($rootScope);
var rbGroupElement = element;
View gist:e6c24a8c0a4026a959fa

Open Source Contributions:

Angular Material

  • Accessibility of docs website: skip link, toggle menus, focus management, CSS for high contrast mode
  • Accessibility auditing and development for all components
  • Testing browers with assistive technologies on OSX, Windows, iOS and Android
  • 73 merged pull requests
  • 120 created issues, 128 closed, 66 assigned

Angular.js

@marcysutton
marcysutton / sample.scss
Created May 7, 2015
Angular Material CSS Best Practice
View sample.scss
// Brittle:
md-dialog {
&> md-dialog-content {
}
}
// better:
md-dialog {
.custom-dialog-content {
@marcysutton
marcysutton / the-deal.md
Last active May 3, 2016
Accessibility Support in HTML5 Audio
View the-deal.md

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 / 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 / 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 {
You can’t perform that action at this time.