
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.-
Color blindness
Normal Vision
Deuteranomaly – Reduced sensitivity to green light
Protanopia – Red-blindness
Tritanopia – Blue-blindness
-
Low acuity
Low Acuity Vision
-
Clouded/Obstructed
Glaucoma – Damaged optic nerve
Macular Degeneration – Loss in center field of vision
-
Complete blindness
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.
- 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 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 recom
- 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 u
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:- 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.
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