DESIGNING FOR THE VISUALLY IMPAIRED

For those of us who aren’t one of the 7.3 million Americans with a visual impairment, we might not think about how graphic design impacts people with certain disabilities. The way a website, brochure, or infographic is designed affects the accessibility and user experience (UX, or UI–User Interface) differently for each of us. Section 508 of the Rehabilitation Act requires all electronic and information technology (EIT) developed, procured, maintained, or used by United States federal agencies to be as equally accessible to persons with disabilities as it is to those who are not disabled. CATMEDIA ensures all graphic designs, web designs, videos, and animations – any products we create – meet the technical, functional, and support requirements to be legally compliant. Designing infographics, web graphics, and marketing or sales collateral with visually-impaired people in mind is pertinent to a larger audience than highly inclusive designers and those seeking compliance with Section 508. Constructing content to be accessible for people with visual impairments also strengthens the user experience for the rest of your audience. Readability, contrasting elements, use of color, strong symbolism, and text/voice alternatives all make designs more impactful.

TYPES OF VISUAL IMPAIRMENT

Understanding the different types of visual impairments and how they might affect a user’s experience is a good place to start when designing 508 compliant products. It can be hard to envision what graphic design elements look like through eyes that aren’t your own. Fortunately, there are tools online that replicate visual impairments, which provide insight for designing solutions to accessibility issues. Below are descriptions and examples of a few types of visual impairments. In later sections of this article we will address design solutions for visual deficiencies. For each visual impairment, we show the familiar Google logo to illustrate how people with a particular impairment might see it.
  1. Color blindness
Color blindness is the decreased ability to see particular colors or discern the differences between them. It effects 8% of the male population and 0.5% of the female population. There are several types of color blindness, but most often people with color blindness have trouble distinguishing reds from greens. Although rare, a few people have total color blindness, which means they don’t see any color at all.

Normal Vision

Deuteranomaly – Reduced sensitivity to green light 

Protanopia – Red-blindness 

Tritanopia – Blue-blindness

  1. Low acuity
Visual acuity describes the clarity or sharpness by which a person sees. There are multiple causes for low acuity that vary from optical causes, such as astigmatism, to neural causes, such as a brain damage.

Low Acuity Vision

  1. Clouded/Obstructed
This includes a range of visual impairments including macular degeneration, glaucoma, floaters, and cataracts.

Glaucoma – Damaged optic nerve 

 

Macular Degeneration – Loss in center field of vision

  1. Complete blindness
People with complete blindness cannot see anything, and do not see light. This is different from being “legally blind,” a distinction in the United States defined as having a visual acuity of 20/200 or less in your best eye with the best possible correction. It may seem impossible to design for people who are completely blind, or very close to it, but this is not the case with technologies today. People use screen readers to navigate the Internet via sound instead of sight. Screen readers convert text into “synthesized speech” enabling the user to alternatively listen to content. Later in this blog we will cover best design practices for users of screen readers.

READABILITY

Designs that are clear and consumable are the vehicle for delivering great content. Designing for people with visual impairments challenges you to create designs with even more clarity. A clear design begins with the appropriate typographical selections. A clean sans-serif typeface (meaning no extended features on the letters) such as Arial, Verdana, or Helvetica helps increase the legibility of your content. Text that is heavily stylized, such as a cursive typeface or an italic font, will make it more difficult to differentiate individual characters. By making space in and around words, they become more distinguishable and enjoyable to read. Some visual adjustments to the text spacing that increase readability include:
  • Tracking (the space between words)
  • Kerning (the space between individual letters)
  • Leading (the space between lines of text)
  • Line width (most readable at 30-40 characters)
It’s important to make adjustments that best fit the content and the audience. There are no exact settings that will work in every situation. The amount of necessary space needed will depend on the context, format, and size of the content. However, there are a few general guidelines to follow when designing type for visually impaired people:
  • Use bigger font sizes.
  • No italics
  • Bold when possible
  • Use simple backgrounds.
  • Avoid grey text and backgrounds.
  • Avoid adding a shadow effect to text as it changes the shape of the letters.

CONTRASTING ELEMENTS

One of the best ways to improve the accessibility of your design is to use heavy contrast. Contrast can be applied to a variety of design elements, including color, size, and shape. To ensure there is enough distinction between visual components, there are a few techniques to assist you. One method I recommend is checking the accessibility of your color choices. There are tools for this purpose such as the one Google built for their Material Design site. This tool determines the legibility of text in different colors and sizes alongside your choice of background color. This is a great starting place to play around with initial color ideas. It’s also a great way to test out colors you have already chosen. Other techniques for ensuring sufficient contrast include:
  • Step back and squint at your design. Can you read/understand it?
  • Switch the image to greyscale. Do the individual elements stand out?
  • Use bolder, thicker lines. Lines that are too thin may not be seen at all.

DON’T RELY ON COLOR TO COMMUNICATE

It’s common for designers to lean on color to indicate meaning. Red is especially used as a crutch to say, “This is wrong.” Unfortunately, people who have trouble discerning reds may miss the message altogether. It’s much better to show an idea using a combination of symbolism, text, and color. This way, the message is delivered as strongly as possible to the largest amount of people. In the same way, charts and graphs that rely on color to separate groups can be hard to “read” for people with visual impairments, especially those with color blindness. By including contrasting textures and patterns you add another layer of readability. A strong design conveys the same meaning in monochrome. Think of color used in an accessible design like a coat of paint on a house. The structure and purpose of the house is the same with or without the paint.

SCREEN READERS AND ALTERNATIVE TEXT

To ensure that a person using a screen reader is able to efficiently access your content, take the following measures:
  1. Use a simple, single column layout.
  2. Any information that would be gathered from images, objects, scripts, CSS, etc. should be available via alternative text. Alternative text is a description inserted as an attribute on an image using HTML. A screen reader reads the alternative text in place of the image. Alternative text is visible to all users if an image fails to load.
  3. Strong alternate text is descriptive and contextually grounded. There is no need to include redundant information that can be gathered from the text surrounding an image. Keep the description concise, and put the important information first.
  4. The contents of a page should only change if an element is activated by the user.
  5. Accessible links and buttons are descriptive, not just text that reads, “CLICK HERE”. Explain what the link is and where it is going.
If these steps aren’t plausible to take in your design, the next best solution is to create separate pages that are accessible for people with visual impairments. A valuable addition to these pages is the ability for the user to change the font size and color.

CONCLUSION

It’s best to keep your design as minimal as possible. Use a linear, organized layout with a strong hierarchy that is informed by the content. Avoid flashy or animated text and backgrounds that reduce readability. Select a small, thoughtful color palette that provides good contrast. Think about what you are trying to say and what needs to be included to get that point across. Thoughtfully editing and harnessing your designs to promote greater accessibility will make them more usable for everyone. What are your design challenges when communicating to your target audience(s)? Please share below, and follow us on social media! Looking for other helpful tips? Check out our Resources page.

ABOUT CATMEDIA:

CATMEDIA is an award-winning Inc. 500 company based in Atlanta, Georgia. Founded in 1997, the company specializes in advertising, creative services, media production, program management, training, and human resource management. As a Women Owned Small Business (WOSB), CATMEDIA provides world-class customer service and innovative solutions to government and commercial clients. Current CATMEDIA clients include Centers for Disease Control and Prevention (CDC), Federal Aviation Administration (FAA), Office of Personnel Management (OPM), and the Department of Veterans Affairs (VA). Stay Connected with CATMEDIA: For more information on CATMEDIA and its services, please visit http://www.CATMEDIA.com Like us on Facebook at https://www.facebook.com/CATMEDIASTUDIO/ Follow us on Twitter at https://twitter.com/CATMEDIATweet

Leave a Reply