Accessibility in visual design is about making communication products work for all people as well as possible, including people with disabilities. Designing for accessibility is a type of user-centered design, because it makes the diverse needs of users the top priority.
A key idea in accessibility is that designing for disabilities and limitations benefits some people all the time, but all people some of the time. For example, elevators are an accessibility feature in the design of buildings — some people with mobility limitations need elevators rather than stairs all the time, but elevators benefit people who sometimes take the stairs when they are injured, carrying heavy things, wearing fancy shoes, or just feeling tired.
Similarly, designing text for readability with simple fonts, larger text and clear contrast is especially important for users with limited vision, but benefits anyone who may be reading in less-than-ideal circumstances such as poor lighting or screen glare, or when distracted or tired. An important reason to understand design principles such as hierarchy and consistency is that these practices improve accessibility and inclusivity so your message can successfully reach the largest audience possible.
Color Accessibility
There are two main accessibility concerns with the use of color:
- Contrast: The difference between the value (lightness/darkness) of the text color compared to the background color. If there is not enough contrast, many people will find it difficult to read.
- Color Dependence: The use of color to convey information. No information should be conveyed with color alone, because some people will be unable to perceive the color differences. For example, if a design uses red and green buttons, they should include other text or icons to indicate their purpose and differentiate them.
Zoom reaction buttons use color symbolism, but also include additional symbols so the meaning can still be understood without color.
There are a growing number of tools to make it easier to assess whether websites meet color accessibility standards. One tool to try is the a11y color validator.
Alt Text for Images
The most important feature in web design for image accessibility is the use of the alt text attribute in website code. Alt text is a property that includes a text label describing the image for users who cannot see it, either because of vision or technology limitations.
For example, the image above showing Zoom buttons is in the HTML code like this:
<img src="img/zoomreactions.png" alt="Screenshot of reaction buttons from Zoom videoconferencing software" />
If someone is viewing this page using a screen reader or assistive technology, that text description would be displayed or read aloud.
Alt text should be used for images with informational purposes. The text should describe what the image shows and its intended meaning or purpose. If there is a visible text caption, alt text shouldn't be redundant with the caption.
Design for Assistive Technology
Many people use the internet with assistive technology, which includes screen readers and other tools for navigating websites with limited vision or mobility.
Most assistive technology tools read a webpage from its code, rather than how it appears. People use keyboard commands, touchscreen gestures, or voice-activated commands to interact with the site. Watch this short video example of using assistive technology with a smartphone:
Memes and design trends sometimes push the boundaries of what digital platforms and tools were designed to do, creatively working within those constraints. However, these creative uses can be disruptive or inaccessible. For example, various social media trends have used emoji and decorative text in ways that are frustrating for people who use assistive technology and now have to listen to long chunks of nonsense to access the information. (Hear an example here.)
The "red flag" meme that became popular on Twitter in 2021 prompted a conversation about meme accessibility after disabled users pointed out how it sounded when using assistive technology.
As more platforms have added features for including alt text, that field has sometimes been misused for joke punchlines, image credits, or hashtags. These incorrect are not harmless — they exclude users who rely on alt text information.
Clear HTML code that makes use of hierarchy and correct tags is the best way to make sure your information comes through in whatever format a user may need.
Extreme Contrast and Motion
Some medical conditions, such as types of seizures and migraines, can be triggered by extreme contrast of light and dark combined with motion. This is most important to consider in video and motion graphics where transitions between different visuals may have a jarring effect that the viewer cannot anticipate.