Redirecting to default login... Accessibility for Visual Impairment – Mobility Center of Excellence Team Website

Accessibility for Visual Impairment

Background Information

At KP, we believe good accessibility is good usability. We want every product to be usable by all of our members. Much of our design focuses on making applications accessible to impaired users. The following case study examines some statistics about impaired mobile device users and provides in-depth analysis about visual impairments.

How Many People?

A high percentage of people self-report physical impairments, even if they are not diagnosed. See the table below for a reference on US adults with self-reported impairments, by age group:

Statistics Graph

Sources: CDC (2015), National Health Interview Survey (2014), Wiser Usability (2016)

Visual Impairment Examples

Visual impairments can cause blind spots, reduced visual acuity, double vision, hallucinatory images, increased glare sensitivity, reduced contrast sensitivity, reduced or distorted color sensitivity, and a variety of other symptoms. The following examples illustrate what a person with a specific type of visual impairment might see. These images are approximations and are meant for learning purposes only.

Color blindness

  • Red-green: loss or limited function of red or green cone, resulting in color distortion.
  • Blue-yellow: loss or limited function of blue cone, resulting in color distortion.
  • Complete: does not experience color at all.

Color Blind Example

Normal

Color Blind Example

Red-Green

Color Blind Example

Blue-Yellow


Macular Degeneration

Leading cause of visual impairment among older people. Causes blurred, distorted, or dim vision or a blind spot in the center of the visual field.

Macular Degeneration Example

Mild

Macular Degeneration Example

Medium

Macular Degeneration Example

Severe


Cataracts

Cataracts affect more than 50 percent of all adults by age 80. A condition in which the lens of the eye becomes cloudy or opaque causing images to appear blurred or fuzzy and colors to seem faded.

Cataracts Example

Mild

Cataracts Example

Medium

Cataracts Example

Severe


Glaucoma

Disease in which the pressure of the fluid inside the eye is too high, resulting in a loss of peripheral vision. The increased pressure can damage the optic nerve and eventually lead to blindness.

Glaucoma Example

Mild

Glaucoma Example

Medium

Glaucoma Example

Severe


Diabetic Retinopathy

Eye condition that results from the damaging effect of diabetes on the circulatory system of the retina. When blood vessels leak or break, it distorts the vision.

Diabetic Retinophathy Example

Mild

Diabetic Retinophathy Example

Medium

Diabetic Retinophathy Example

Severe


Sources: National Eye Institute (2016), American Foundation for the Blind (2016), Chromatic Vision Simulator App (2015), Braille Institute Vision Sim App (2013)

Visual Impairment Design Solutions

How can we design good experiences for our visually impaired users? Using ADA best practices will help us to create mobile products that every KP member can use.

  • Using High Contrast – As a rule of thumb, aim for 4.5+ contrast ratios on all your text, icons, and images. Provide ways to adjust color contrast, or err on the side of higher contrast colors.
  • Use More Than Just Color – Color is a great way to indicate selection, active/disabled states, and draw attention. However, for color-blind users, this visual communication may be lost. Therefore, always use multiple visual communications to supplement color. This could include underlining, bolding, size differences, and animations. Color cannot be your sole indication.
  • Use Color Well – Be cautious with red vs. green, blue vs. green, and with blue and yellow close to each other.
  • Use Large Fonts – The minimum font size for ADA is 13pt. However, it is always best to use larger font sizes when possible. When in doubt, go bigger! Think of a use-case in which a user may be walking outside on a sunny day with lots of screen glare, and pick font sizes that work well in that situation.
  • Plain Backgrounds – Whenever possible, put your text on a flat color background. Avoid having text that overlays patterns or complex imagery.
  • Code For Screen Readers – Make sure every element on the screen has a label that makes sense for a screen-reader. Also make sure that there is a logical flow to the sequence that a screen reader would read each element.
  • Code For Re-sizing Text – Code layouts and font-sizes to allow the user to increase the text size to their preference.

Using these guidelines we can develop accessible applications and bring widely usable products to our members.

Want to learn more? Check out these case studies below:

Accessibility scanner Accessibility Scanner
Using Google Accessibility Scanner to ensure that KP mobile products meet minimal Americans with Disability Act (ADA) standards.
Cardiac Rehab Android Watch Cardiac Rehab Android Watch
How accessibility affects product design for wearable devices.
Touch Target Accessibility Touch Target Accessibility
Ensure your touch target sizes are large enough for ease of use.