Lead Product Designer
Go to LinkedIn
Designing for visual accessibility can serve as a first step toward creating truly inclusive software. You'll also find that it improves usability for everybody.
To be fully accessible to disabled people, design and development need to work together. This means that there are two parts to accessibility work for designers:
How to design for visual accessibility in 8 easy steps
Reference WCAG 2.0, 1.4.3, AA
Use the sliders to adjust text and background colors until you reach a contrast level you're happy with.
The results show up under the foreground slider. Ideally they look like the example on the left, with all green Pass values.
Shoot for passing at least WCAG AA for all text. For bold text larger than 14px, you can get away with passing only the Large Text WCAG AA test, as shown on the right.
WebAIM contrast checker
There are many tools for contrast checking and adjusting on the web. I recommend WebAIM's Contrast Checker. Enter the hexcode for your text color into the Foreground Color textfield and the hexcode for the background into the Background Color field.
Higher contrast benefits almost everybody who doesn't have perfect vision. That includes the roughly 8% of American men who are color blind, as well as most middle-aged and older people. It's not a pleasant thought, but our eyes are affected by age. Just like old car head lights, over the years human corneas get yellow and foggy.
Reference WCAG 2.0, 1.1.1, A
Here's an example of a bar graph with a table underneath. The table serves as a text alternative to the graph.
To reduce clutter, the table can be hidden under an expand/collapse element.
In user testing I've noticed that sighted people with a background in finance or engineering often trust the data more if they can see the table in addition to the graph. It's just one more example of how addressing accessibility improves usability for everybody.
Complex text alternatives
Here's an example of a chart from Yahoo Finance that definitely needs a visible text alternative. It's a combined line graph and bar graph. The designer has incorporated a text alternative at the top left of the chart. It's the little table of values.
Simple text alternatives (alt attributes)
On the right is an example of three very simple images. You don't need to add any visible alternate text to your design for these images, unless you want to.
A word about content writing
Content writers play an important role in making a site accessible to disabled users. There are quite a lot of accessibility resources for writers on the web. The W3C Web Accessibility Initiative have a concise overview about writing for accessibility.
Elements on the page that aren't text may need text alternatives. This applies to images and graphs that convey facts. So for example a pie chart that shows investment allocations needs a text alternative. The stock photo of an actor smiling at a laptop does not.
Reference WCAG 2.0, 1.4.1, A
You can supplement the color with a letter or word. But if you compare this illustration to the other options on this page, you'll notice that this one is harder to see at a glance.
Finally you can use a pattern in your shapes to distinguish them from each other. I could see this being used for land use on a map. Sheep pasture could have little wooly clouds, conifer forests could have dark green pointy triangles etc.
Placement is a very common marker to distinguish between positive and negative values in graphs. It's a helpful design trope for everybody. And as far as color-blind people are concerned, it's a homerun.
The purple bolt is obviously larger than the green one. Size is a good marker if the difference is related to a larger value. This design could e.g. be used to show that too many units failed quality control.
Here the designer is using different shapes to distinguish between the two objects. This design is usable by the roughly 8% of American men who are color blind. It's also more obvious to people with perfect vision.
What not to do
The only thing that distinguishes these two bolts from each other is the color. Color-blind people can't use your app if it's designed like this.
When conveying information, don't use color alone. You can still use color to convey information, e.g. through color coding bars in a bar graph. It's just that you need to supplement color with another marker that can be seen by those who can't see color.
Here are a couple of markers that work in different situations, depending on what you're trying to convey.
Here's an example of what it can look like when the first paragraph of the transcript is shown and the rest is under a link.
For streaming or recorded video and audio, you also need to provide captions in real time.
Reference WCAG 2.0, 1.2.2, A
Reference WCAG 2.0, 1.2.1, A
Audio and video require transcripts
For usability and search engine optimization, place the transcript on the same page as the audio or video. Many people like to scan the transcript before (or instead of) watching the video.
Close banner button
In this example of an animated banner, the advertizing agency are complying with the requirement to stop motion by giving the user a Close banner button. But they don't really want you to close the banner, so the button doesn't meet contrast requirements. Once you're aware of accessibility requirements, you'll start noticing little things like the ⊗ button hidden in the top right corner everywhere.
The human brain is adapted to notice things that move. When you are trying to read something, and there's constant movement at the edge of your vision, reading comprehension is going to suffer. For people with cognitive disabilities, even minor distractions can kill their focus. That's why it's an accessibility requirement to avoid continous motion. You can choose to stop the movement programmatically, or give the user a way of stopping things that distract them.
This screenshot is from the US Post Office tracking feature. Can you tell which elements you can click on or hover over? This is what happens when you use the same color for headings and links and don't underline links -- you end up with a significant usability issue.
When the user hovers over an interactive element or places focus on it, the element needs to react in an obvious way. Unfortunately the W3C hasn't defined what exactly that means, so it's a judgment call.
In many cases, the simplest way of complying with this requirement is to let the browser take care of it. But you can also specify the behavior for hovering and focusing. Here are some examples to get you started.
Follow established conventions or go skeumorphic
In this illustration of sliders and grippies, on the other hand, it's fairly obvious what you can do with each element. That's because they all either follow well-established conventions, or mimic offline controls.
As you can see, you can use flat design and still communicate affordance.
Underline text links
For links, the simplest way of showing that they are clickable is to underline them. Depending on the context, there are other conventions, such as icons, backgrounds and borders, that can be used to clearly mark text as clickable.
Whichever way you go, make sure that it's visible without user action and doesn't rely on color alone.
Affordance has to be obvious
Affordance is the quality in an object that implies how it can be used. For example the shape of a mug handle suggests that it can be used to pick up and hold the mug.
Three things are required for affordance to be obvious to everybody:
1. Text only
I included this version in the user testing only because it would require minimal Development effort. We'd simply add a line to the details boxes at the bottom of the page with a cost estimate.
4. Interactive slider
There's even less information in this version, but I think that if we can get users to engage with it, the impact will be much stronger.
3. Static bar graph
There's less information in the bar graph, because it assumes that you've invested $10,000. But the visual impact is greater than with a table.
A new section on the page, with a table showing how the cost grows over time and with higher amounts.
MADE IN PIXEL TOGETHER