Image: handshake with typography encouraging good human behavior
Respect. Inclusion. Collaboration. Participation. Diversity. Privacy. Support. These are some of the issues not just of our time, but all time.
JavaScript
Marcy Sutton – Head of Learning, Gatsby
bit.ly/js-civil-rights – @marcysutton
Hi, I'm Marcy Sutton, and I care about people. I'm here talk to you about an important topic affecting all of us: Civil Rights, and how we can protect them as JavaScript developers.
What are Civil Rights?
The rights of individuals to receive equal treatment – and to be free from unfair treatment or discrimination
"Some perceive their privilege as rights and see equal rights infringing on their privileges." https://twitter.com/DGMason/status/894889522449797120
Aspects of Civil Rights
Protection from discrimination
Physical & mental integrity
Safety
Privacy
Freedom of speech
You know what doesn't belong here? Hatred. Checking out a book at the library, getting killed standing up to bigotry on a train. Having your qualifications doubted because of your gender or age.
Equal protection
People fought for this
Equal rights for all
Picketing for fair housing in New Jersey, 1960's–part of the Civil Rights Movement, the largest social movement of the 20th century. What Dr. King fought for. We cannot forget his legacy–in fact, there are streets across America and abroad named after Dr. King.
http://archive.northjersey.com/news/teaneck-woman-among-the-last-remaining-pioneers-of-north-jersey-s-civil-rights-movement-1.448116
Bettye Lane - Equal Rights and Opportunities March in Manhattan
American photojournalist of the feminist, civil rights and gay rights movements. These were influenced by the Civil Rights Movement for African Americans.
http://blog.aarp.org/2012/09/24/bettye-lane-a-feminist-photojournalists-arresting-images/
Nothing about us without us-protest by the European Disability Forum
Protest in front of European Parliament calling on the Internal Market Committee of European Parliament to adopt a more ambitious position for disability legislation in Brussels
https://www.neweurope.eu/article/people-disabilities-protest-better-european-accessibility-act/
Dawn Russell being loaded onto police bus for processing with her fist raised in POWER!
© DC Adapt
DC Adapt protesting Medicaid cuts
Protecting our users’ & collaborators’ rights to
Access, safety
We have a responsibility to honor our users' civil rights to access, security and privacy
JavaScript
Ubiquitous
Pivotal
Modern
It is true that simpler is better in terms of UIs most of the time. But JS-heavy interfaces are going to continue, so we might as well make them as safe and inclusive (& therefore successful) as we can
Today
How JavaScript applies to:
Accessibility
Security
Safety
Privacy
Freedom
I can only attempt to do this topic justice. We won't be able to cover it all. But my perspective is accessibility is a civil right, I recognized that there's more we can do to protect these things as developers.
Accessibility is:
Freedom from discrimination
Freedom of movement and independent living, privacy in your own affairs (think: banking). Accessibility is inhertently political, and in addition to "doing the right thing", people with disabilities around the world lean on laws that protect their rights.
29 Years of A.D.A.
The Americans With Disabilities Act
Accessibility is about:
Barrier-free environments
https://metrofutureblog.wordpress.com/2013/10/10/metro-transit-a-pioneer-in-transit-accessibility/
Web Accessibility is:
The inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities
It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
It’s all of us
Microsoft Inclusive Design Toolkit http://bit.ly/microsoft-inclusive-toolkit
A holistic approach to accessibility makes the web better for everyone.
Highlights the duality of this talk–it's about our users, but unlike typical usability–it's also about us.
Put your values
and help people
As technologists, every interface or service we build can impact people's rights for better or worse.
Vox Media Guidelines
https://a11ywins.tumblr.com/post/149389575993/vox-media-accessibility-guidelines
Dries Buytaert
Drupal's commitment to accessibility
https://dri.es/drupal-commitment-to-accessibility
It's refreshing to see an accessibility commitment from Dries at a time when Wordpress failed to adequately include collaborators and produce something with accessibility in mind. I don't bring this up to sling mud–only to communicate the importance of inclusion when the stakes are so high–affecting millions of users around the world.
Gatsby Accessibility Statement
An accessibility statement on your website demonstrates a commitment to accessibility and provides a way for people with disabilities to contact you if they encounter any barriers. It's okay to not be perfect, as long as you're open to feedback and actively working to improve it.
Because here's the thing: you're bound to mess something up. It's what you do when presented with that information that makes all the difference.
Leadership
and a commitment from all of us
True inclusion requires leadership commitment from the top-down, as well as a commitment from all of us. The lone accessibity champion can't do it all by themselves–it takes all of us to make lasting change. And that makes sense: the changes we make for accessibility can help all of us. It is that big of a deal. And here's why:
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.
https://www.customerservant.com/some-quick-thoughts-on-the-gutenberg-controversy-being-labelled-as-wordpress-drama/
UI Considerations
Accessible HTML
Keyboard support
Focus management
Screen reader updates
Localization
Accessible HTML includes keyboards and screen readers
Accessibility Insights for Web
https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni
Writing Automated Tests for Accessibility
Youtube: Automated and Manual Accessibility Testing with Marcy Sutton — Learn With Jason
https://www.youtube.com/watch?v=IADSsClWVtA&list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx
Security
- hijack more resources in the network and allow the attacker to also infect the website’s visitors.
- mining cryptocurrency, stealing data, and installing ransomware
Cryptocurrency Mining Hack That Compromised Thousands of Sites ‘Could Have Been a Catastrophe’
https://motherboard.vice.com/en_us/article/bj5m4v/cryptocurrency-mining-coinhive-browsealoud-hack-thousands-of-sites-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...
https://twitter.com/Scott_Helme/status/962776008188465152
Security
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
Provide affordances
To turn off animations/motion
Thankfully Twitter made an option to prevent GIF autoplay
prefers-reduced-motionUser 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
Tweet from @TashasEV: Dear every web developer in the history of ever and all the future to come: Don't auto-play *anything* *ever*
Also note the play button GIFs on Twitter
Brave lets you disable autoplay for sites like CNN.com
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
Right after this I saw the same ad on Instagram
Websites Leak Our Data
http://www.cbsnews.com/news/the-data-brokers-selling-your-personal-information/
Tracking cookies
Ad networks
Measuring behavior
Dossiers/profiles
Religion, ethnicity, political affiliations, user names, income, and family medical history
Data brokers doing it for "commerce". All of this can end up in a file somewhere that's being sold to a prospective employer.
The US gov't signed away privacy protections for internet users this year.
Disqus
Any one of these third-party scripts is potentially also an attack vector as it could be compromised like BrowseAloud
Dries on Youtube Tracking
https://dri.es/how-to-remove-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
https://nakedsecurity.sophos.com/2015/07/30/websites-can-track-us-by-the-way-we-type-heres-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
https://github.com/WICG/aom
Apple: About Accessibility Events
https://support.apple.com/en-us/HT209655
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');
};
There are a lot of things we can't track on the web. Like: screen reader usage or JavaScript event bindings.
Recap
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. ✌️
There are other aspects too, like voting and employment
