A presentation at FOSDEM in in Brussels, Belgium by Ioana Chiorean
A11y It is not a bug, definitely a feature
Who is L̶o̶a̶n̶a̶ Ioana Chiorean? I am a PM (former QA TL) & CL Mozillian for more than 9 years now I volunteer - Mozilla & EU Code Week. I worked on devices for more than 10y. Twitter @ioana_cis # lifeofamozillian 2
“All people over the course of their lives traffic between times of relative independence and dependence” Sarah Hendren
1 billion some form of disability (15%), 200 million very significant
“It’s possible to fly without motors, but not without knowledge and skill.” Wilbur Wright
What? ➔ Vision Disability - Complete Blindness or Color Blindness or Poor Vision ; Visual problems like visual strobe and flashing effect problems 7
What? ➔ ➔ Vision Disability - Complete Blindness or Color Blindness or Poor Vision ; Visual problems like visual strobe and flashing effect problems Physical Disability - Not able to use the mouse or keyboard with one hand; Poor motor skills like hand movements and muscle slowness 8
What? ➔ ➔ ➔ Vision Disability - Complete Blindness or Color Blindness or Poor Vision ; Visual problems like visual strobe and flashing effect problems Physical Disability - Not able to use the mouse or keyboard with one hand; Poor motor skills like hand movements and muscle slowness Cognitive disability - Learning Difficulties or Poor Memory or not able to understand more complex scenarios 9
What? ➔ ➔ ➔ ➔ Vision Disability - Complete Blindness or Color Blindness or Poor Vision ; Visual problems like visual strobe and flashing effect problems Physical Disability - Not able to use the mouse or keyboard with one hand; Poor motor skills like hand movements and muscle slowness Cognitive disability - Learning Difficulties or Poor Memory or not able to understand more complex scenarios Literacy Disability - Reading Problems 10
What? ➔ ➔ ➔ ➔ ➔ Vision Disability - Complete Blindness or Color Blindness or Poor Vision ; Visual problems like visual strobe and flashing effect problems Physical Disability - Not able to use the mouse or keyboard with one hand; Poor motor skills like hand movements and muscle slowness Cognitive disability - Learning Difficulties or Poor Memory or not able to understand more complex scenarios Literacy Disability - Reading Problems Hearing Disability - Auditory problems like deafness and hearing impairments; Cannot able to hear or not able to hear clearly 11
The web is for all people
Why.. ➔ People ❤ 14
The reality is that accessibility, whether online or in the real world, helps a wide variety of people (wheelchair ramps.sidewalks) Nicolas Steenhout
Why.. ➔ People ❤ ➔ Regulations - minimize legal risk 16
Survivorship bias
Why.. ➔ People ❤ ➔ Regulations - minimize legal risk ➔ Users - data sets ◆ You do have them, trust me ◆ New ones 18
Survivorship bias
Why.. ➔ People ❤ ➔ Regulations - minimize legal risk ➔ Users - data sets ◆ You do have them, trust me ◆ New ones ➔ No ROI / No money, honey ◆ Enhance your brand 20
Why.. ➔ People ❤ ➔ Regulations - minimize legal risk ➔ Users - data sets ◆ You do have them, trust me ◆ New ones ➔ No ROI / No money, honey ➔ Enhance your brand ➔ Doing favors vs doing your job ◆ Drive innovation / improve practices 21
Accessibility audits
“It is really like any other thing you learn. It takes time till you add it first and then you just add it everywhere” Stefan Judis
How ➔ ➔ ➔ ➔ ➔ ➔ ➔ DevTools Audits Color Contrast Patterns & Colors Typography - Comics Sans Animations Semantic - elements in order/a11y tree/ Page structure/ Menu nav & list Alt input - links, images, etc 24
DevTools Audits ➔ ➔ ➔ Not bounded to any framework ARIA tree inspector - Mozilla a11y team colaboration Run a simulation ➔ ➔ http://firefox-devtools-tour.glitch.me/20190915/new/#a11y http://firefox-devtools-tour.glitch.me/20190915/soon/#color-blin dness https://developer.mozilla.org/en-US/docs/Web/Accessibility/Un derstanding_WCAG/Keyboard https://hacks.mozilla.org/2019/10/auditing-for-accessibility-prob lems-with-firefox-developer-tools/ ➔ ➔ 25
Tools ➔ ➔ ➔ ➔ ➔ ➔ ➔ ➔ Close your eyes and try to navigate DevTools ◆ Color Checks /Typograpgy JAWS, Orca, Voice Over. Lighthouse Wave Tota11y Webhint.io My example: ◆ 3 different OS + mobile => 4 ◆ 2 browsers + mobile => 3 ◆ Different Machines / Monitors 32
Recommandations ➔ Stefan Judis’ blog on Accessibility Resources ➔ Firefox Developer Tools Page for Community & Documentation ➔ FOSDEM talks : ◆ Make it accessible - Tips and tricks for create a good accessible frontend Gabriele Falasca ◆ 12:15 - Discover the New Firefox Profiler Nazım Can Altınova 33
Don’t be the sheep! Be the wolf fox! Photo credit.
“Information should not be a priviledge” Una Kravets
🐦 @ioana_cis ● ioana@mozilla.com ● http://bit.ly/a11yFOSDEM “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web
A11y and inclusion is getting more traction nowadays but people still think that they address only those with disabilities. As a person without any officially i did find myself in this situation and felt confused about how the web should be ( was about to loose money on ticket conferences because i was not seeing the categories). Some Developers are a bit defensive saying they don’t have users for whom to build more a11y in or the time to add these features. Showing the devtools Firefox has for it - will show how fast you can check your page and how no costy is. Also not knowing all best practices won’t be a blocker and firefox will give you suggestions. In a way I wanted to bring attention to A11y and Inclusion in a more technical way.
Here’s what was said about this presentation on social media.
for free. You
can too.