How To Plan for Visually Disabled Users on Computers and Mobile Devices: Color Blindness, Low Vision, and Blindness

/in /by

[vc_row][vc_column][vc_column_text]Did you know that there is about 7.4 million people with vision disorders? These vision disorders include but is not limited to:

  • Color blindness
  • Low Vision (associated with illnesses and age)
  • Blindness

I am going to touch on the very basics of these vision disabilities and so that you will know what to avoid in your interface, and most importantly, what to do in your interface.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Color Blindness

In the world, color blindness affects around 1 in 12 men (8%) and 1 in 200 women (0.5%). People with color blindness have the inability to process red and green or blue and yellow. This can cause issues when using colors to indicate important states or statistics in an app or website. Some possible issues people with color blindness may deal with:

  • Traffic lights
  • Picking out clothes that match
  • Being rejected from a job assignment due to color deficiency
  • Buying ripe bananas at the grocery store
  • Making sure meat is thoroughly cooked
  • Not being able to tell difference between vacant (green) and occupied (red)
  • Colored maps and graphics (i.e. weather radars)

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Example 1

If you love making charts or read them yourselves, check out this Google Analytics chart (normal vision at top and color blindness below it). It’s difficult to see which one is 25 to 34 and 18 to 24 years old.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_single_image source=”external_link” external_img_size=”300px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/900/1*Q15r4K8G6rO5ckVlQGM6Ig.png” caption=”Normal Vision reading charts is great.”][/vc_column][vc_column width=”1/2″][vc_single_image source=”external_link” external_img_size=”300px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/900/1*WKxU3oemVEL3XhAqtGgo5A.png” caption=”Color Blindness causes issues with red and green colors, not able to differentiate labels.”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Example 2

People that are color blind may also have issues seeing traffic light colors and rely heavily on position of those colors for their action.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/900/1*53YkQf2GrflGzpvtnvTUUg.png” caption=”Left to Right: Normal Vision, Tritanopia (Missing Blue), and Protanopia (Missing Red) Color Blindness”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

What to Avoid in the Interface

What can you do to accommodate 8+% of the United States population that visit the web or use an app? There are a bunch of color combinations that should be avoided if at all possible. The colors on the chart below are if viewed by normal vision.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/720/1*93owfUw9rjftdiwOIUUr8A.png” caption=”Avoid pairing green with red, grey, blue, brown or black. Avoid pairing blue with purple, gray, and yellow.”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Here’s a more comprehensive color chart of colors to avoid. The two color combinations above the main block translates into the solid color block to color blind users.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/900/1*bAIhapeqyhgwEJLk0WkjyA.png”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

How To Improve the Interface

  • Use colors and symbols to indicate the meaning of something.
  • Use shade and tone variations instead of multiple colors in your designs.
  • Use contrasting colors and tones.
  • Consider using textured background patterns to differentiate similar colors.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Low Vision

Did you know about 135 million people around the world have low vision?

A person with low vision will have difficulty with daily activities such as looking at websites, reading, and driving. Even with glasses, contact lenses, medicine, or surgery, their vision may not be that good. Typically we think of elderly people that are associated with this disability, but it affects any age.

Low vision issues may affect anyone with the following:

  • Glaucoma, Diabetes, Macular degeneration, or Cataracts
  • Older monitors with poor screen resolution
  • Mobile devices with smaller screens
  • Accessing the web via phone or computer with poorly lit screens or washed out by sunlight
  • Migraine sufferers that are sensitive to light (screen light adjustment)

According to WebAIM, the most important rule for low vision is how perceivable something is. People with low vision issues can’t see content that is small, does not enlarge well, or does not have enough contrast. Some possible issues people with low vision may deal with:

  • Recognizing the faces of friends and relatives
  • Reading, cooking, or sewing
  • Seeing because the lights don’t seem as bright as usual
  • Crossing the street or reading signs

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

What to Avoid in the Interface

Embedded Text in Images

People with low vision use screen magnifier programs to view the web. Avoid text that is embedded within graphics (unless it’s a vector image). Why? If the user zooms in, the text will be rasterized and sometimes be not legible.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/720/1*drHoblKlLYZdG_t6b5JXiw.png” caption=”Left side is text in an image, while the right side is that text zoomed in.”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Bad Contrast with Readable Elements

Avoid bad contrast of background and overlaying text. For example, having a black background with blue, white, or very dark gray text would not be a great idea. Same goes for red background with blue or green text. Yuck![/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/720/1*SRIOPCrnA-BXM5AAGItgUA.png” caption=”Examples of bad contrasts between background and overlaying text.”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

How to Improve the Interface

  • Pull most if not all important text out of images
  • Make sure the contrast between backgrounds and overlaying text are distinct. (dark background and light text vs. light background and dark text).
  • Text in images should be large, clear, and distinct (see both items above).
  • Allow people to customize contrast settings by not overriding backgrounds and main body text with stylesheets.

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Blindness

Users that are blind can’t rely on using a monitor or mouse to access the web. They use screen readers and keyboards to get the information they need. Blind users heavily rely on keyboard accessibility and screen readers. Because of this, relying on mouse-only events could be problematic.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_single_image source=”external_link” external_img_size=”600px” onclick=”link_image” custom_src=”https://cdn-images-1.medium.com/max/720/1*0jMxk331NX0HEVXj1RURHA.jpeg” caption=”Brailliant Braille Display helps users to read from the computer (courtesy of Humanware)”][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

What to Avoid in the Interface

  • Images without alt tags
  • Improperly named links without title attributes
  • Too much non-relevant information at the top of a website
  • Lack of instructions for filling out a form
  • Avoid iframe content, as this can disorientate the user
  • Avoid flash content (use HTML5 player instead) Image maps — not all screen readers can interpret these
  • Avoid using javascript within links so there’s no question where it goes <a href=”javascript:history.go(-1)”>See Info about Flowers</a>

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

How to Improve the Interface

Skip to content links

Use skip to content links at the top of the page. Skipping over navigation and sidebars with secondary content can be very helpful for those wanting to get to information quickly.

Ex: <a href=”#content”>Skip to Main Content</a> <a name=”content”></a>

Form field labels

Use proper labels on form fields.

Ex: <label for=”firstname”>First Name</label> <input type=”text” id=”firstname”>

Use appropriate link labels

Name links carefully so that the user knows what it will do when clicked. Never use “Click Here” or “Learn More” because these do not explain what the link will do, however, use something more descriptive such as “Download the Latest Version of Chrome”.

Alt text for all images

Keep it brief and to the point. If the image is meaningless, your alt text doesn’t need to be too detailed, however, if the image conveys an action, be sure to be concise. If you are still stuck in the 90’s and want to use a graphic for spacing, you should still use alt text, but designate it as empty by adding a space in between the quotes.

Optimize tables

If using tables on your site, provide column and row headers using the <th> tag. Make sure that tables (don’t forget merged cells) make sense when read row by row from left to right. Also don’t forget to add a summary and caption to your table.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

In Conclusion

I hope you find this information about visual disabilities helpful so that whenever you plan on building a new web app or website, you can also plan to make it accessible to a larger range of audience.

If you care about your users, you may want to try putting yourself in their shoes briefly by using a screen reader, changing up the colors of your monitor, or even trying to enlarge fonts on a screen (that includes mobile devices as well).

Remember, larger audience equals more engagement, and more engagement equals more opportunities![/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_empty_space][vc_separator][vc_empty_space][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Further Reading

[/vc_column_text][vc_empty_space][/vc_column][/vc_row]

How to Plan for Disabled Users on Computers and Mobile Devices (Overview)

/in /by

[vc_row][vc_column][vc_column_text]

I get it that you are busy. You may not have thought about accessibility because you are thinking about #allthethings required to get your website or app to a place where it’s deliverable and usable. Totally understandable. That’s why I am breaking all this down into several digestible parts for you to take a look at when you have time.

Accessibility is constantly on my mind all the time, but not because it’s the right thing to do. It’s because I want to. I am reminded of accessibility when my brother is attempting to use his iPhone. My brother (an adult) has cognitive disorders that keeps him from being able to access information easily on the web. I cringe when he opens an app and tries to use it but usually ends up getting help most of the time.

According to the United States Census Bureau, as of March 2015, there were 321.4 million people in the U.S. (dang, that’s a lot!) Did you know most studies find 64.3 million (or 20%) of the entire United States population has some kind of disability? That is a lot of people with disabilities that may issues accessing your web site or mobile app.

Disabilities at a Glance

Are you a designer, user experience, or developer that has missed planning and prepping a product for people with disabilities? It’s easy to forget unless you know someone or if you are included in the population of these disabilities mentioned below.

There are five (5) main disability groups according to the Web Accessibility Initiative:

Physical

There are 36.2 million people in the U.S. with physical disabilities.

Examples of physical disabilities (layman’s terms for now):

  • Missing body parts
  • Joint inflammation, damage, and pain
  • Lack of hand or eye coordination
  • Weak or degeneration of muscles
  • Injury to bones, joints, tendons, tissues
  • Twitches, spasms, or involuntary movements
  • Paralysis (partial or full)

 

Hearing

There are 40.3 million people in the U.S. with hearing disabilities.

Examples of hearing disabilities:

  • Hard of hearing
  • Deafness

 

Cognitive

There are 16 million people in the U.S. with cognitive disabilities.

Examples of cognitive disabilities:

  • Inability to focus on single tasks
  • Social and interaction communication issues
  • Impairment of intelligence
  • Difficulty focusing, processing, or understanding information
  • Short or long-term memory issues
  • Visual flickering or audio signals at certain frequencies or patterns

 

Speech

There are 7.5 million people in the U.S. with speech disabilities.

Examples of speech disabilities:

  • Inconsistent articulation and speech sounds
  • Fast speaking rate, incorrect rhythm, intonation, etc.
  • Weakness or complete paralysis of muscles related to speech
  • Difficulty to make certain sounds or patterns of sounds
  • Repetition of individual sounds or entire words and phrases
  • Inability to speak (from anxiety, brain injuries, or inability to hear and learn speech)

 

Vision

There are 21.7 million people in the U.S. with vision disabilities.

Examples of vision disabilities:

  • Difficulty distinguishing between colors
  • Poor, tunnel, central field loss, and clouded vision
  • Blindness

 

In Conclusion

I hope just by those statistics above and basic disability information above has piqued your interest in accessibility. ? In the coming articles, I will break down each of these five disability groups into digestable parts with examples of what to avoid when working on a user interface.

Up Next: How to Plan for Visually Disabled Users on Computers and Mobile Devices

 

Statistic References

Centers for Disease Control and Prevention (CDC)

Cognitive Impairment: A Call for Action, Now! (Opens a PDF)

U.S. Department of Health & Human Services

[/vc_column_text][/vc_column][/vc_row]