Image: handshake with typography encouraging good human behavior

and Civil Rights

Marcy Sutton – Head of Learning, Gatsby

What are Civil Rights?

The rights of individuals to receive equal treatment – and to be free from unfair treatment or discrimination

Aspects of Civil Rights

  • Protection from discrimination
  • Physical & mental integrity
  • Safety
  • Privacy
  • Freedom of speech

Equal protection
under the law

People fought for this

Equal rights for all

Bettye Lane - Equal Rights and Opportunities March in Manhattan

Nothing about us without us-protest by the European Disability Forum

Dawn Russell being loaded onto police bus for processing with her fist raised in POWER!

© DC Adapt

Protecting our users’ & collaborators’ rights to

Access, safety
and privacy


  • Ubiquitous
  • Pivotal
  • Modern


How JavaScript applies to:

  • Accessibility
  • Security
  • Safety
  • Privacy
  • Freedom

Accessibility is:

Freedom from discrimination

Disability: what’s that about?

  • Visual
  • Hearing
  • Motor/Physical
  • Cognitive

29 Years of A.D.A.

The Americans With Disabilities Act

ADA search on

Accessibility is about:

Barrier-free environments

Web Accessibility is:

The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities

WCAG 2.1 and Section 508

It’s all of us

Spectrum of disability from permanent to situational

Microsoft Inclusive Design Toolkit

Put your values
to work

and help people

Vox Media Guidelines

Dries Buytaert

Drupal's commitment to accessibility

Gatsby Accessibility Statement


and a commitment from all of us

Amanda Rush

I do not have the privilege of simply ignoring Gutenberg’s accessibility problems, because when it becomes the default editor those accessibility problems will directly effect my livelihood.

Poor Accessibility 👎🏾

Better Accessibility 👍🏾

UI Considerations

  • Accessible HTML
  • Keyboard support
  • Focus management
  • Screen reader updates
  • Localization

Browser Debugging
Chrome Accessibility Inspector

Accessibility Insights for Web

axe-core on npm

Writing Automated Tests for Accessibility

Youtube: Automated and Manual Accessibility Testing with Marcy Sutton — Learn With Jason


Cryptocurrency Mining Hack That Compromised Thousands of Sites ‘Could Have Been a Catastrophe’

Tweet from Scott Helme: The more I think about this the worse it becomes. Attackers had arbitrary script injection on thousands of sites including many NHS websites here in England. Just stop and think for a few moments about what exactly they could have done with that capability...


  • Use HTTPS
  • Keep software up to date
  • Sanitize user input (and keys?!)
  • Check integrity of scripts
  • Follow infosec best practices


Telegraph technology article: GIF counts as 'deadly weapon' in seizure-inducing tweet case, court says

Motion Sickness Warning

Provide affordances

To turn off animations/motion


User settings in CSS, JavaScript

  var motionQuery = matchMedia('(prefers-reduced-motion)');
  var handleReduceMotionChanged () => {
    if (motionQuery.matches) {
      /* adjust motion of 'transition' or 'animation' properties */
    } else { 
      /* standard motion */
  handleReduceMotionChanged(); // trigger once on load if needed

Let Users Decide

Reduced motion on iOS and OSX Sierra

Reduced Motion in Preferences list on iOS Reduced Motion Preference on OSX Sierra

Giphy example

Tweet from @TashasEV: Dear every web developer in the history of ever and all the future to come: Don't auto-play *anything* *ever*

Brave lets you disable autoplay for sites like

Vox with an Ad Blocker turned on

Vox with an Ad Blocker turned off: a Jimmy John's ad takes over half the screen with an autoplaying video


Creepy advertising

Websites Leak Our Data

  • Tracking cookies
  • Ad networks
  • Measuring behavior
  • Dossiers/profiles


Dries on Youtube Tracking

The tools we use

should not undermine our users’ privacy

Naked Security: Websites can track us by the way we type – here’s how to stop it

Tweet from @LeonieWatson: .@Facebook using educated guesses to trap people into confirming they have a disability is *not acceptable!

Marco Zehe: Why screen reader detection on the web is a bad thing

WICG: Accessibility Object Model

Apple: About Accessibility Events

What you can do

Measure accessible events*

* with a public privacy policy & opt-out

  handleKeydown = event => {
    if (event.key !== 'Enter' && event.key !== ' ') return;

    // add event tracking of keyboard support
    ga('send', 'event', 'Menu', 'Keydown', 'Select Item');


  • Accessibility is a civil right.
  • Safety and privacy, too;
  • These rights are interlinked.
  • Laws vary, but they impact us all.
  • Our work impacts peoples’ lives!
  • We can make a difference. ✌️

Thanks, Vox!