Image: handshake with typography encouraging good human behavior

JavaScript
and Civil Rights

Marcy Sutton – Head of Learning, Gatsby

bit.ly/js-civil-rights@marcysutton

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

Protecting our users’ & collaborators’ rights to

Access, safety
and privacy

JavaScript

  • Ubiquitous
  • Pivotal
  • Modern

Today

How JavaScript applies to:

  • Accessibility
  • Security
  • Safety
  • Privacy
  • Freedom

Accessibility is:

Freedom from discrimination

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

It’s all of us

Spectrum of disability from permanent to situational

Microsoft Inclusive Design Toolkit
http://bit.ly/microsoft-inclusive-toolkit

Put your values
to work

and help people

Drupal.org

Dries Buytaert

Drupal's commitment to accessibility

Gatsby Accessibility Statement

Leadership

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

Drupal 8 Accessibility Docs

Browser Debugging

http://bit.ly/chrome-devtools-a11y
Chrome Accessibility Inspector

axe-core on npm

Drupal, axe and nightwatch

Remembering Rachel Olivero

Security

Drupalgeddon 😇

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...

Security

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

Safety

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

Motion Sickness Warning

NarrowDesign.com

Provide affordances

To turn off animations/motion

prefers-reduced-motion

User settings in CSS, JavaScript

https://webkit.org/blog/7551/responsive-design-for-motion/

  var motionQuery = matchMedia('(prefers-reduced-motion)');
  var handleReduceMotionChanged () => {
    if (motionQuery.matches) {
      /* adjust motion of 'transition' or 'animation' properties */
    } else { 
      /* standard motion */
    }
  }
  motionQuery.addListener(handleReduceMotionChanged);
  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 CNN.com

Privacy

Creepy advertising

Websites Leak Our Data

http://www.cbsnews.com/news/the-data-brokers-selling-your-personal-information/

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

Disqus

Dries on Youtube Tracking

The tools we use

should not undermine our users’ privacy

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

https://www.marcozehe.de/2014/02/27/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;
    event.preventDefault();
    this.selectItem(event);

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

Recap

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

Thanks, Drupalcon!