I Can’t See: Low Vision A11y & Users

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

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

Why? Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Talk about how I got in to accessibility and my motives to keep pushing for visibility into it.(CLICK)

“I can’t see that.” Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Who has heard this before? When someone says “I can’t see that.” what do they mean? - Do they mean they really can’t see it, because of color or disabled features? - Do they have some type of low vision impairment that would hinder them from observing what is on the screen? - If they do have a low vision impairment, what can we as developers do to help in aiding them to having a great user experience?

Percentage of people with disabilities. No Disabilities Disabilties 20% 80% Chris DeMars ! @saltnburnem

There are 7 billion people, give or take, on this earth. 1.4 billion of them have a disability. Touch on internal applications as well. (CLICK) #DevReach2019 ! #DeveloperCommunity

A11y Chris DeMars ! @saltnburnem

Who has heard the term a11y? Do you know what the combination of letters and numbers is called? (CLICK) #DevReach2019 ! #DeveloperCommunity

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

(CLICK) #DevReach2019 ! #DeveloperCommunity

What is a11y? Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

“Web accessibility means that people with disabilities can use the Web.” https://www.w3.org/WAI/intro/accessibility.php Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity So what does Web accessibility really mean? Well, here is the definition for you, provided by me, from the W3, “Web accessibility means that people with disabilities can use the Web.” You know what, I don’t like that definition. (CLICK)

Open Web = Inclusive Web = Web for all! Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity This is an open web right? If an open web means an inclusive web and inclusive means for all, than this definition sounds MUCH better. (CLICK)

“Web accessibility means that EVERYONE can use the Web.” - Me (Chris DeMars) Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity “Web accessibility means that EVERYONE can use the Web.” Every single person that uses the internet should be able to have a great experience whether they have a disability or not, but, we have to pay very close attention to users with disabilities. (CLICK)

“The web is not a barrier to people with disabilities, it is the solution..” - http://webaim.org/articles/pour/ Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity This is another quote I really like and it comes from the Web Aim Website. “The web is not a barrier to people with disabilities, it is the solution..”. The solution. It is our job as developers, designers, product owners, or anyone that has a hand in a web experience to come up with solutions, that is what we do. That being the case, we also have to keep accessibility in mind too. (CLICK)

“Accessibility is NOT a requirement, it is a MUST!” Chris DeMars ! @saltnburnem How about a quote from me. Tweet this! (CLICK) #DevReach2019 ! #DeveloperCommunity

Types of Disabilities ! Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity When we talk about accessibility and users with disabilities, the first thing that comes to mind are users that are blind. That is why we have screen readers, but it is more complex than that. If I told you there are such things as braille machines that help blind users read output from a monitor you would be like, “whoa, I didn’t know that was a thing”. Or for completely immobile users we have such things as sip-n-puffs that are machines that work off of air pressure by sipping and puffing and when you pair that with accessible software it makes for a great user experience that was otherwise not a thing.(CLICK) We have users with hearing disabilities such as conductive hearing loss, sensorineural hearing loss, and mixed hearing loss. (CLICK), users with cognitive disabilities such as memory, problem solving, reading and verbal comprehension (CLICK), mobility disabilities like cerebral palsy, arthritis, MS (CLICK), temporary/short-term disabilities like a broken hand, broken arm, single parent with a newborn child (CLICK), but what I am going to talk to you about today are (CLICK) vision disabilities. Specifically low vision. (CLICK)

Types of Disabilities ! Hearing Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Types of Disabilities ! Cognitive Hearing Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Types of Disabilities ! Cognitive Mobility Hearing Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Types of Disabilities ! Cognitive Mobility Hearing Chris DeMars ! @saltnburnem Temporary #DevReach2019 ! #DeveloperCommunity

Types of Disabilities Vision ! Cognitive Mobility Hearing Chris DeMars ! @saltnburnem Temporary #DevReach2019 ! #DeveloperCommunity

POUR Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

• I have a four letter acronym that I want everyone to memorize, sleep, breathe, and eat. We should be basing our development efforts around these 4 main guiding principles of accessibility. They are as follows. (CLICK)

P O U R Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity (CLICK) Perceivable, is the experience easily readable? Can I view images? Can I use a screen reader? (CLICK) Operable, can I solely use just a keyboard? Are the interactions easy? Are there timers on certain actions? (CLICK) Understandable, do I understand the language? Are there supplemental representations for things I don’t understand on the screen like words and associated pictures? (CLICK) And Robust, can the experience be viewed and used across a wide range of technologies? (CLICK)

P erceivable O U R Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

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

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

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

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

• Out of the 4 letters that make up that acronym, the one we are focusing on when it comes to low vision is (CLICK) perceivable. (CLICK)

P erceivable Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Poor Vision !== Low Vision Chris DeMars ! @saltnburnem Poor vision can be corrected by glasses or contacts. Low vision is caused by eye disease. (CLICK) #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Let’s talk about vision abilities and disabilities for a little bit. Users with full use of their vision can make out all the things around them, culturally speaking. (CLICK) They know the difference between street lights, red, green, amber. (CLICK) They can read text, view images. (CLICK) They can make sense of symbolic and visual cues. (CLICK) They can also perceive colors. Users with visual disabilities on the other hand, might not be able to have that luxury. There are other ways of communication for visually disabled users, one big one being audio format, which is afforded by screen readers. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Let’s talk about vision abilities and disabilities for a little bit. Users with full use of their vision can make out all the things around them, culturally speaking. (CLICK) They know the difference between street lights, red, green, amber. (CLICK) They can read text, view images. (CLICK) They can make sense of symbolic and visual cues. (CLICK) They can also perceive colors. Users with visual disabilities on the other hand, might not be able to have that luxury. There are other ways of communication for visually disabled users, one big one being audio format, which is afforded by screen readers. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Let’s talk about vision abilities and disabilities for a little bit. Users with full use of their vision can make out all the things around them, culturally speaking. (CLICK) They know the difference between street lights, red, green, amber. (CLICK) They can read text, view images. (CLICK) They can make sense of symbolic and visual cues. (CLICK) They can also perceive colors. Users with visual disabilities on the other hand, might not be able to have that luxury. There are other ways of communication for visually disabled users, one big one being audio format, which is afforded by screen readers. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Let’s talk about vision abilities and disabilities for a little bit. Users with full use of their vision can make out all the things around them, culturally speaking. (CLICK) They know the difference between street lights, red, green, amber. (CLICK) They can read text, view images. (CLICK) They can make sense of symbolic and visual cues. (CLICK) They can also perceive colors. Users with visual disabilities on the other hand, might not be able to have that luxury. There are other ways of communication for visually disabled users, one big one being audio format, which is afforded by screen readers. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Let’s talk about vision abilities and disabilities for a little bit. Users with full use of their vision can make out all the things around them, culturally speaking. (CLICK) They know the difference between street lights, red, green, amber. (CLICK) They can read text, view images. (CLICK) They can make sense of symbolic and visual cues. (CLICK) They can also perceive colors. Users with visual disabilities on the other hand, might not be able to have that luxury. There are other ways of communication for visually disabled users, one big one being audio format, which is afforded by screen readers. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Color Blindness Or Color Vision Deficiency Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity I came here and you came here to learn about low vision and accessibility so let’s get in to the different types of low vision disabilities that we may encounter in our journey as web people that are working on the web. First on the list we have color blindness or color vision deficiency, CVD for short. (CLICK)

What is it? Chris DeMars ! @saltnburnem Good question. If you are color blind does that mean you can only see in shades of gray? (CLICK) #DevReach2019 ! #DeveloperCommunity

“Color vision deficiency is the inability to distinguish certain shades of color.” - https://www.aoa.org/ Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity Being color blind does not mean you can’t see every color. It means there are certain colors that you cannot see OR colors that are representing the colors that should be in your view. (CLICK)

How many people are color blind? Chris DeMars ! @saltnburnem (CLICK) #DevReach2019 ! #DeveloperCommunity

1 in 12 ” “”” ” “” “”” “” Chris DeMars ! @saltnburnem 1 in 12 men are affected by some type of color blindness. (CLICK) #DevReach2019 ! #DeveloperCommunity

1 in 200 🙋 Chris DeMars ! @saltnburnem 1 in 200 women are affected by some type of color blindness. (CLICK) x 200 #DevReach2019 ! #DeveloperCommunity

Men Women Women 6% Men 94% Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

• Why do more men experience color blindness than women? (CLICK) Because the gene is passed down from the mother and there tends to be a bigger population of men than women in some parts of the world so it only makes sense. (CLICK)

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

Thanks mom! (CLICK)

Types of color vision deficiencies? Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity What types of color vision deficiencies do people experience? (CLICK) We have deuteranopia which is a reduced sensitivity to green light and it is the most common type of color vision deficiency. (CLICK) Protanopia, which is a reduced sensitivity to red light. (CLICK) Last, but technically not least is tritanopia which is a reduced sensitivity to blue light and is extremely rare. There is one very last type of CVD. (CLICK)

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

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

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

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

Monochromatic Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity I know I said that color blindness does not mean people see in shades of gray. In general, people don’t see in shades of gray, BUT this type of CVD is more rare than tritanopia. (CLICK)

1 in 33,000! Chris DeMars ! @saltnburnem

Only 1 in 33,000 experience this type of CVD. (CLICK) #DevReach2019 ! #DeveloperCommunity

Visual Acuity Chris DeMars ! @saltnburnem

We have another type of low vision disability and it is called visual acuity. When I say the words visual acuity, what comes to mind? I bet this does. (CLICK) #DevReach2019 ! #DeveloperCommunity

But this is not the type of visual acuity I am talking about since this visual acuity is based off movement. And we all know what happens when you move in front of a T-Rex. (CLICK)

You end up like Genarro. We don’t want that, but I digress. (CLICK)

What is it? Chris DeMars ! @saltnburnem

• Visual acuity. This is another great question. (CLICK) #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Does everyone know what this is right? A visual acuity distance chart or a Snellen chart. A Snellen chart is used to determine the clarity of your vision at 20 feet. How many of you have 20/20 vision that you know of? Keep in mind though that having 20/20 vision does not mean you have perfect vision. There are other things that add to having perfect vision such as peripheral vision, color blindness, etc. (CLICK)

Types of visual acuity? Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity What types of visual acuity are recognized out in the wild today? Well we have three different types. I should have said this before but I am not an optometrist nor am I an ophthalmologist so bear with me. (CLICK)

Spatial Acuity Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

2 points in spaaaaaace Chris DeMars ! @saltnburnem

Spatial acuity is the ability to resolve 2 points in space. (CLICK) #DevReach2019 ! #DeveloperCommunity

Temporal Acuity Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

Distinguish visual elements in time! Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Temporal acuity means having the ability to distinguish visual elements in time. Perfect example is tv, movies, video games, etc. Fun fact…in the days of early motion pictures the projector was not fast enough for the eye to see a continuous picture, therefore the person watching the picture saw the flicker of the film, and because of that movies became known as flicks. (CLICK)

Spectral Acuity Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

Spectral Acuity Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Ability to distinguish differences in wavelength, like types of light. An example of this are photographers who work in a dark room, with red light can still see crisp photos and text. (CLICK)

Acuity is SCIENCE Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Acuity is science! I could def go down a rabbit hole with the explanation of acuity, but I couldn’t tell you the difference between a rod and a cone and how they absorb light and turn images into pictures that your brain can process. So lets move on shall we? (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Contrast Sensitivity Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Contrast sensitivity is very very important. When we talk about color contrast we are talking about a person being able to distinguish something in the foreground compared to what is in the background. (CLICK)

How many of us have been in a situation like this? Driving down a dark road in the city with barely any lights, or driving a country road up north. And out of nowhere you see someone standing on the side of the road or trying to cross, same with a deer? That could be an indicator that you have trouble with contrast at night. I know this example is more in depth than talking about contrast on the Web but the principal is the same. If the contrast is bad, you could end up hurting yourself or someone else. Just like with a Web experience, if the color contrast of that experience does not meet the Web Content Accessibility Guidelines 2.1, than you will end up hurting yourself. And you will probably feel like this. (CLICK)

Federal Website Accessibility Lawsuits by State in 2017 Number of Lawsuits 400 335 325 300 200 100 0 6 9 AZ CA 8 58 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 This is from an article from the Seyfarth Shaw website titled, “2017 Website Accessibility Lawsuit Recap: A Tough Year for Businesses”. (CLICK)

What is good color contrast? Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity What makes for a good color contrast? In general it is any color that can bounce off another. Like my slides. Black text on a white background. Easily discernible, easily able to read the content. According to the new W3C working draft for WCAG 2.1, the minimum contrast ratio to meet level AA requirements is…(CLICK)

WCAG 2.1 says 4.5:1 Chris DeMars ! @saltnburnem

4.5:1. This is the minimum contrast ratio for an accessible user experience. (CLICK) #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

🎉$🎉 Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Field of Vision Chris DeMars ! @saltnburnem

The last type of low vision disability I am going to talk about is field of vision. (CLICK) #DevReach2019 ! #DeveloperCommunity

55

55

What is field of vision? Chris DeMars ! @saltnburnem

Field of vision is the area that can be seen when the eyes are in a fixed position. (CLICK) #DevReach2019 ! #DeveloperCommunity

Technical Stuff! Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity From my research all of these areas of vision make up the human eye field of view or field of vision. (CLICK)

Three types of Field of Vision impairments Chris DeMars ! @saltnburnem

If you experience a field of vision impairment, it may be one of these three. (CLICK) #DevReach2019 ! #DeveloperCommunity

1. Central https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

2. Peripheral https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

3. Other https://www.w3.org/TR/2016/WD-low-vision-needs-20160317/#cause-and-progression-of-low-vision Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

I am only going to talk about a few of the issues we have. I could sit up here and talk about this all day, but I only have an hour. If you want to know more about low vision in particular, I suggest going to the actual spec which is 2.0, but all of that applies to 2.1. (CLICK)

The Problem Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Now that we know some of the different types of low vision, we can focus on the problem, and it is a big problem. (CLICK)

Contrasting Colors Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity First on the list is contrasting colors. All too many times the wrong colors are used. They might look cool, but functionally they do not work. (CLICK)

Chris DeMars ! @saltnburnem

Explain why this fails. (CLICK) #DevReach2019 ! #DeveloperCommunity

Colors That Just Don’t Work Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity I have heard from color blind users that there are just some colors that do not work for them. (CLICK)

Communication Through Colors Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Communication through colors. We as developers, designers, product owners, and stakeholders cannot communicate through the use of color. Doing this poses a huge problem, like how I described in my last slide. If you are going to use color to differentiate between things, try using some type of visual distinction as well. (CLICK)

My Awesome Legend Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Lets say you have a legend of colors for some type of rating system and it looks like this. And to the side, but not associated with those colors is the meaning of them. (CLICK) So it is on you to memorize what each color means. A user that is color blind might have a lot of trouble with a system like this. Especially if they are told to change the status to a color on the list but they don’t know what “red” is. (CLICK)

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

My Awesome Legend Chris DeMars ! @saltnburnem

This could cause a huge issue for someone who has a monochromatic CVD. This leads in to the next problem. (CLICK) #DevReach2019 ! #DeveloperCommunity

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

Disabling Zoom Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Please don’t do this. What if the user can’t see the small text on a mobile device? (CLICK) If they want too zoom in to an image to see more detail? (CLICK) By restricting the user to a fixed state on a mobile device they might not be able to have the full experience of what you are trying to deliver. (CLICK)

Disabling Zoom Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Disabling Zoom Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Poor Line Height Chris DeMars ! @saltnburnem

Yes it is true, line height does play a part in having an accessible experience. (CLICK) #DevReach2019 ! #DeveloperCommunity

No Line Height Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity This is an example of no line height on these three paragraphs. Now think about it, what if zoom was disabled, there was no line height, and the color contrast wasn’t great. And to top it all off you wanted to view it on a mobile device. That would be impossible all because accessibility wasn’t thought of from the beginning. (CLICK)

Some Line Height Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity These there paragraphs have some line height. Clearly this is way better than the no line-height experience. Even if zoom were enabled, but the color contrast was not great, this would not be impossible to read no a mobile device. (CLICK)

Poor Typography Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity I shouldn’t even have to give an example, but everyone shout it out, what is a bad choice of typography? (CLICK)

Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

Comic Sans Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Conflicting Typography Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity This is also bad. Don’t mix serifs, sans serifs and multiple fonts because that isn’t good for anyone, even if you don’t have a disability. (CLICK)

The Solution Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity We have ways of fixing these things, better yet we have ways of making sure we don’t fall down the no accessibility trap.. (CLICK)

Choose Readable Typography Chris DeMars ! @saltnburnem

This is self-explanatory. (CLICK) #DevReach2019 ! #DeveloperCommunity

Comic Sans Arial & $ Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity This is self-explanatory. The reason for the star in the previous slide is because of the link between typography and dyslexia. There is talk that comic sans is better for dyslexia, but arial is also on the list. (CLICK)

Icons & Symbols Chris DeMars ! @saltnburnem

Icons and symbols can add great value because for the most part they are universal. (CLICK) #DevReach2019 ! #DeveloperCommunity

Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Using iconography helps to communicate things a lot better than colors, even using emoji if you are feeling a little crazy. A thumbs up for something good (CLICK), thumbs down for meh not so good (CLICK), a warning that something may be broke or is in the process of being fixed. (CLICK)

$ Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

$ & Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

$ & ⚠︎ Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

💩 Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity And than something like this for OH SHIT! Use that for putting out fires or when everything starts to break. (CLICK)

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Enable Zoom by Default Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Enable zoom by default. Please, please, please do not hijack the zoom for users that need it. (CLICK)

Zoooooooom! Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity Enable zoom by default. Please, please, please do not hijack the zoom for users that need it. (CLICK)

Zoooooooom! Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

Tools Chris DeMars ! @saltnburnem

#DevReach2019 ! #DeveloperCommunity We have ways of fixing these things, better yet we have ways of making sure we don’t fall down the no accessibility trap.. (CLICK)

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

• This is one of my favorite tools. aXe Core by Deque. Deque is an accessibility consulting company with HQ based out of Virginia, but they have an office in Ann Arbor. aXe Core is an automated accessibility testing engine that can run in the browser (CLICK), or in a testing framework like Mocha, Jasmine, Selenium, PhantomJS (CLICK), or directly in the terminal thanks to Wilco Fiers who created the aXe Core CLI tool.

Browser Extensions & Testing Frameworks Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

• This is one of my favorite tools. aXe Core 3.0 by Deque. Deque is an accessibility consulting company with HQ based out of Virginia, but they have an office in Ann Arbor. aXe Core 3.0 is an automated accessibility testing engine that can run in the browser (CLICK), or in a testing framework like Mocha, Jasmine, Selenium, PhantomJS (CLICK), or directly in the terminal thanks to Wilco Fiers who created the aXe Core CLI tool.

Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

• There is also an integration in to Google Lighthouse. Lighthouse is a tool created by Google that runs an audit on a site and checks for performance, accessibility, progressive web apps, etc. (CLICK)

Takeaways Chris DeMars ! @saltnburnem

(CLICK) #DevReach2019 ! #DeveloperCommunity

Takeaways Use Colors That Work Chris DeMars ! @saltnburnem #DevReach2019 ! #DeveloperCommunity

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

Takeaways Use Colors That Work Run Web Sites Through a Testing/Audit Tool Choose Proper Typography Chris DeMars ! @saltnburnem #DevReach2019 ! #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 #DevReach2019 ! #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 #DevReach2019 ! #DeveloperCommunity

“Every Little Bit Of Accessibility You Contribute Is So Appreciated And So Needed.”

Chris DeMars ! @saltnburnem

Marcy Sutton #DevReach2019 ! #DeveloperCommunity Before I end I want to share this quote with you from my friend and accessibility engineer Marcy Sutton. (CLICK)

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