Explore
Register
Log in

I Can’t See: Low Vision A11y & Users

A presentation at MagnoliaJS by Chris DeMars

Chris DeMars ● @saltnburnem #FRFrontEnd ● #DeveloperCommunity

Chris DeMars ● @saltnburnem #FRFrontEnd ● #DeveloperCommunity

https://github.com/marcysutton/no-mouse-days

Why? Chris DeMars ● @saltnburnem #DeveloperCommunity

I Can’t See Low Vision A11y & Users Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars Front-End Developer @saltnburnem on Twitter! Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem 😢 #DeveloperCommunity

That’s Me! • • • • • • Google Developer Expert Microsoft MVP International Speaker 🌎 Founder of Vuetroit 🔊 Host of Tales From the Script 💚 Tattoos & Horror 👻 🤡 ☠. 🧟. 🧛 Chris DeMars ● @saltnburnem #DeveloperCommunity

Twitter: @TalesFTScript | Site: talesftscript.com 8

“I can’t see that.” Chris DeMars ● @saltnburnem #DeveloperCommunity

Percentage of people with disabilities. No Disabilities Disabilties 38% 62%
https://www.inclusivecitymaker.com/disabled-people-in-the-world-in-2019-facts-and-figures/ Chris DeMars ● @saltnburnem #DeveloperCommunity

A11y Chris DeMars ● @saltnburnem #DeveloperCommunity

Numeronym Accessibility A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ● @saltnburnem #DeveloperCommunity

What is a11y? Chris DeMars ● @saltnburnem #DeveloperCommunity

“Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ● @saltnburnem #DeveloperCommunity

Open Web = Inclusive Web = Web for all! Chris DeMars ● @saltnburnem #DeveloperCommunity

“Web accessibility means that EVERYONE can use the Web.” - Me (Chris DeMars) Chris DeMars ● @saltnburnem #DeveloperCommunity

“The web is not a barrier to people with disabilities, it is the solution..” - http://webaim.org/articles/pour/ Chris DeMars ● @saltnburnem #DeveloperCommunity

“Accessibility is NOT a requirement, it is a MUST!” Chris DeMars ● @saltnburnem #DeveloperCommunity

Federal Website Accessibility Lawsuits by State in 2017 Number of Lawsuits 400 335 325 300 200 100 0 6 9 AZ CA 58 8 1 7 24 9 10 15 2 1 4 FL GA IL MA NH MI NJ NY OH PA PR TX VA Total Number of Suits Nationwide: At least 814 Chris DeMars | @saltnburnem http://bit.ly/2Ds4EPd

Types of Disabilities 🖐 Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of Disabilities 🖐 Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of Disabilities 🖐 Cognitive Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of Disabilities 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of Disabilities 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem Temporary #DeveloperCommunity

Types of Disabilities Vision 🖐 Cognitive Mobility Hearing Chris DeMars ● @saltnburnem Temporary #DeveloperCommunity

POUR Chris DeMars ● @saltnburnem #DeveloperCommunity

P O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P perable O U R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P perable O nderstandable U R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P perable O nderstandable U obust R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P perable O nderstandable U obust R Chris DeMars ● @saltnburnem #DeveloperCommunity

erceivable P Chris DeMars ● @saltnburnem #DeveloperCommunity

Poor Vision !== Low Vision Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Color Blindness Or Color Vision Deficiency Chris DeMars ● @saltnburnem #DeveloperCommunity

What is it? Chris DeMars ● @saltnburnem #DeveloperCommunity

“Color vision deficiency is the inability to distinguish certain shades of color.” - https://www.aoa.org/ Chris DeMars ● @saltnburnem #DeveloperCommunity

How many people are color blind? Chris DeMars ● @saltnburnem #DeveloperCommunity

1 in 12 🚶 Chris DeMars ● @saltnburnem 🚶🚶🚶 🚶 🚶🚶 🚶🚶🚶 🚶🚶 #DeveloperCommunity

1 in 200 👩 Chris DeMars ● @saltnburnem x 200 #DeveloperCommunity

Men Women Women 6% Men 94% Chris DeMars ● @saltnburnem #DeveloperCommunity

Men Women Women 6% The gene is passed down from the mom. Men 94% Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of color vision deficiencies? Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of color vision deficiencies? Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Deuteranopia Types of color vision deficiencies? Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Deuteranopia Types of color vision deficiencies? Protanopia Normal Chris DeMars ● @saltnburnem #DeveloperCommunity

Deuteranopia Types of color vision deficiencies? Protanopia Normal Tritanopia Chris DeMars ● @saltnburnem #DeveloperCommunity

Monochromatic Chris DeMars ● @saltnburnem #DeveloperCommunity

1 in 33,000! Chris DeMars ● @saltnburnem #DeveloperCommunity

Visual Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

What is it? Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Types of visual acuity? Chris DeMars ● @saltnburnem #DeveloperCommunity

Spatial Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

2 points in spaaaaaace Chris DeMars ● @saltnburnem #DeveloperCommunity

Temporal Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Distinguish visual elements in time! Chris DeMars ● @saltnburnem #DeveloperCommunity

Spectral Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Spectral Acuity Chris DeMars ● @saltnburnem #DeveloperCommunity

Acuity is SCIENCE Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Contrast Sensitivity Chris DeMars ● @saltnburnem #DeveloperCommunity

What is good color contrast? Chris DeMars ● @saltnburnem #DeveloperCommunity

WCAG 2.1 says 4.5:1 Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

🎉👍🎉 Chris DeMars ● @saltnburnem #DeveloperCommunity

The Problem Chris DeMars ● @saltnburnem #DeveloperCommunity

Contrasting Colors Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Communication Through Colors Chris DeMars ● @saltnburnem #DeveloperCommunity

My Awesome Legend Chris DeMars ● @saltnburnem #DeveloperCommunity

Waiting Pushed My Awesome Legend In Progress Denied Passed Chris DeMars ● @saltnburnem #DeveloperCommunity

My Awesome Legend Chris DeMars ● @saltnburnem #DeveloperCommunity

Waiting Pushed My Awesome Legend In Progress Denied Passed Chris DeMars ● @saltnburnem #DeveloperCommunity

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Disabling Zoom Chris DeMars ● @saltnburnem #DeveloperCommunity

Poor Line Height Chris DeMars ● @saltnburnem #DeveloperCommunity

Poor Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

The Solution Chris DeMars ● @saltnburnem #DeveloperCommunity

Choose Readable Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

Icons & Symbols Chris DeMars ● @saltnburnem #DeveloperCommunity

Enable Zoom by Default Chris DeMars ● @saltnburnem #DeveloperCommunity

Tools Chris DeMars ● @saltnburnem #DeveloperCommunity

https://github.com/dequelabs/axe-core Chris DeMars ● @saltnburnem #DeveloperCommunity

Browser Extensions & Testing Frameworks Chris DeMars ● @saltnburnem #DeveloperCommunity

Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Use Colors That Work Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Use A Plugin For Your Editor For Testing Chris DeMars ● @saltnburnem #DeveloperCommunity

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Use A Plugin For Your Editor For Testing Leave Zoom Alone! Chris DeMars ● @saltnburnem #DeveloperCommunity

“Every Little Bit Of Accessibility You Contribute Is So Appreciated And So Needed.”
Chris DeMars ● @saltnburnem Marcy Sutton #DeveloperCommunity

Resources & Credits https://bit.ly/2BheA2c Chris DeMars ● @saltnburnem #DeveloperCommunity

Thanks! Chris DeMars ● @saltnburnem #DeveloperCommunity

Link for this presentation:

HTML code for embedding:

<p data-notist="saltnburnem/stMzUL">View <a href="https://noti.st/saltnburnem/stMzUL">I Can’t See: Low Vision A11y & Users</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>

Share on social media:

Tweet

Chris DeMars
@saltnburnem

1 / 114

Chris puts presentations on Notist

Notist

for free. You can too.

Important stuff
Help & support
Terms of use
Privacy policy

And more
Pro accounts
Notist for teams
Credits

Elsewhere
Blog
Twitter
Newsletter