TYPES OF VISUAL IMPAIRMENTUnderstanding 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.
Deuteranomaly – Reduced sensitivity to green light
Protanopia – Red-blindness
Tritanopia – Blue-blindness
Low Acuity Vision
Glaucoma – Damaged optic nerve
Macular Degeneration – Loss in center field of vision
READABILITYDesigns 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)
- 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 ELEMENTSOne 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 COMMUNICATEIt’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 TEXTTo ensure that a person using a screen reader is able to efficiently access your content, take the following measures:
- Use a simple, single column layout.
- 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.
- 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.
- The contents of a page should only change if an element is activated by the user.
- Accessible links and buttons are descriptive, not just text that reads, “CLICK HERE”. Explain what the link is and where it is going.