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 / 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;
@marcysutton
marcysutton / developer-guide.md
Last active Mar 14, 2018
ngAria Developer Guide
View developer-guide.md

The goal of ngAria is to improve Angular's default accessibility by enabling common ARIA attributes that convey state or semantic information for assistive technologies used by persons with disabilities.

##Including ngAria

Using ngAria is as simple as requiring the ngAria module in your application. ngAria hooks into standard AngularJS directives and quietly injects accessibility support into your application at runtime.

View using-ngaria.md
@marcysutton
marcysutton / string-wildcard-replacement.js
Created Mar 17, 2015
JavaScript string manipulation
View string-wildcard-replacement.js
var str = '1?101?011';
var repl = ['0', '1'];
var pattern = /\?/g;
var numMatches = str.match(pattern).length;
for(var j=0; j<numMatches; j++){
for(var i=0; i<repl.length; i++){
console.log(str.replace(pattern, repl[i]));
}
}
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

You can’t perform that action at this time.