How to make your visualizations more accessible

Data visualizations should be accessible to everyone in your audience, including individuals with disabilities. To improve your visualization's accessibility, start by considering these four categories of disabilities:

  • visual
  • auditory
  • physical
  • neurological

 

Within each category, there are many different disabilities and assistive technologies that could impact the way an individual will interact with your visualization. This is by no means an exhaustive list, but you can see some examples in the following table:

  Relevant Disability Examples Assistive Technology Examples
Visual
  • blindness or low vision
  • color blindness or color vision deficiency
  • screen reader
  • screen magnifier
Auditory
  • deafness or hearing impairments
  • transcripts or captioning of audio content
Physical
  • mobility and dexterity impairments, such as partial or total paralysis
  • involuntary movement, such as tremors or spasms
  • keyboard-only navigation
Neurological
  • vestibular and seizure disorders, such as epilepsy
  • memory impairments, such as Dementia
  • learning disabilities, such as Dyslexia
  • attention disorders, such as Attention Deficit Hyperactivity Disorder (ADHD)
  • Autism spectrum disorders, such as autism and Asperger syndrome
  • options to suppress blinking, flickering, flashing, and otherwise distracting content

The next step is to consider how your audience will interact with your data visualization and to identify any aspects of your design that may present accessibility barriers in these categories.

 

For example, if your data visualization is a table of financial figures where some values are colored green and some are colored red to indicate positive or negative values, consider how this creates a visual barrier to individuals with color vision deficiency. 

Table of data with red and green numbers, shown in full-color and with simulated color-blindness.

After identifying this potential barrier, you could make any number of improvements to your design such as changing to a more accessible color palette, adding a "-" sign to the beginning of any negative numbers, or sorting the numbers into different columns.

Tables of data showing different design solutions for color-blindness.

While every data visualization is unique and so are its potential accessibility solutions, here are some design considerations for common elements.

Typography

Only use ALL CAPS for abbreviations.
Words written in all-caps are more difficult for your audience to read because there are fewer distinguishing differences (such as height) between the letters, requiring more effort to decipher each word. Moreover, screen-readers will often spell words in all-caps out as though they are abbreviations (ex. “RESPECT” would be read as “R-E-S-P-E-C-T”), so it is best to reserve all-caps for actual abbreviations.

The word "respect" written in all-caps and in normal casing.

 

Always color and underline links.
Styling your links with both coloring and underlining ensures that they can easily be identified even if your audience can't distinguish the color of the link. To make this even more effective, try to reserve underlines for links and use other tactics, such as bolding, when you want to emphasize text.
Example of an underlined link shown in full-color and without color.

 

Writing

Use descriptive text for buttons or links.
For links and buttons, instead of using generic text such as "click here," use descriptive language that would make sense out of context. This is helpful because it doesn't require your audience to remember the context behind the text and because some assistive technologies, such as screen readers, can isolate the clickable elements on a page to make them easier to interact with but have to take them out of context in order to do so.
Example non-descriptive "click here" link text versus descriptive "see my data source here" link text.

 

Avoid jargon and idioms.
Everyone requires extra time to process the meaning of jargon and idioms. Keeping these to a minimum will help your audience understand your message faster and can make your content more accessible to broader audiences such as those outside of your field of study or non-native speakers.
Example idiom "once in a blue moon" versus plainly stating "this almost never happens."

Color

Use sufficient color contrast for text.
When the contrast between the color of text and the background behind it is too low, it can be difficult for users to read that text. You can test the contrast of your colors with this color contrast checker.
Example text with insufficient and sufficient color contrast.

 

Use color blindness friendly colors.
Essentially, color vision in the human eye is made possible by three groups of receptors called "cones" that perceive different wavelengths of light: blue cones (short wavelengths), green cones (medium wavelengths), and red cones (long wavelengths).

Diagram of cones in the human eye processing color.

Color blindness or color vision deficiency (CVD) is a modification or absence of one or more of these cones.

Blue Green Red Condition
X X X Trichromasy (full color vision)
X X   Protanomly (red-weakness) or Protanopia (red-blindness)
X   X Deuteranomaly (green-weakness) or Deuteranopia (green-blindness)
  X X Tritanomaly (blue-weakness) or Tritanopia (blue-blindness)
X     Blue-Cone Monochramacy (only blue cones)
      Achromatopsia (monochromacy, true color blindness) or Dyschromatopsia

Although we can't say for sure what different types of color vision look like, we can simulate the effects to see what color combinations might be difficult to distinguish. Below is a diagram showing a full-color palette alongside simulated palettes for red, green, and blue color blindness.

A full-color palette alongside simulated palettes for red, green, and blue color blindness.

Deuteranomaly (green-weakness) is by far the most common condition and, collectively, deuteranomaly (green-weakness), deuteranopia (green-blindness), protanomly (red weakness), and protanopia (red-blindness) are known as red-green color blindness because they involve difficulty distinguishing between red and green. Because all of these conditions have difficulty distinguishing red and green, it is particularly important to pay attention to anywhere you have used a red/green color scheme and to consider replacing it with a more color-blindness friendly color palette such as blue/red or purple/green.

Example red/green color palette and blue/red or purple/green color-blindness friendly alternatives.

To test other aspects of color blindness accessibility for your visualization, try viewing it in grey-scale or use a tool such as the Coblis Color Blindness Simulator. To get additional help choosing color-blind safe colors, try online tools such as Viz Palette.

 

Label data directly.
For visualizations with color legends, consider labelling the chart directly to reduce reliance on the legend or add a second encoding such as different line strokes to make it easier to map the legend to the data.
Example direct labelling of a line graph.

 

Indicate error states with more than just color.
If you have error states or error messages, indicate them with more than just color to ensure that color is not required to identify them. For example, consider adding a symbol in front of your error messages that clearly marks them as errors.Example error messages shown in full-color and with simulated color-blindness.

 

Images

Add alt-text.
If your project is digital, you will likely have the option to add an alt-text property to your images that provides alternative information for an image if a user can't view the image for some reason (ex. because of a slow internet connection or if they are using a screen reader). If your image is purely decorative, you can leave the alt-text blank. If your image is functional, you can add a brief description in alt-text and add a longer description under a long-desc property if necessary and available. To learn more about when to use alt-text, check out W3C Web Accessibility Initiative's guide to alt-text. To learn more about what to write in your alt-text for specific data viz types (i.e. everything from Venn diagrams to scatter plots), check out the Diagram Center's Image Description Guidelines.
Example Venn diagram without and with alt-text.

 

Use vector based images instead of raster based images when possible.
Raster based images (ex. .png, .jpeg, .gif) are composed of a fixed number pixels and cannot be enlarged without distortion. Vector based images (ex. .svg, .eps) are composed of geometric forms called "paths" that create points, lines, and shapes that can be enlarged without distortion. Using vector based images supports assistive technologies such as screen magnification.
Example raster and vector images resized.

 

Interactivity

Don't require precision for any touch targets (i.e. buttons, tooltips).
Touch targets are elements such as radio buttons, checkboxes, links, and tooltips that a user interacts with. To ensure your targets don't present a barrier to members of your audience with motor or dexterity issues, consider the following: make touch targets large enough to be easily clickable (i.e. use link text that is longer than one word or consider using Voronoi grids for small tooltips); use simpler gestures such as hovering or clicking as opposed to complex gestures such as double-clicking or tapping-and-holding; and avoid interactions that are time based. 
Example small touch target and large touch target.

 

Support keyboard navigation. 
Some users navigate without a mouse, using a keyboard alone to interact with a page so it is important to avoid functionality such as mouseover or hover effects that require a mouse. Unless the functionality of your visualization can't be accomplished in any known way using a keyboard (ex. free-hand drawing), it is important to ensure it is keyboard accessible. To test this, try navigating your visualization using only your keyboard. You can use the TAB and arrow keys to move the active focus between elements and activate a selected element using the ENTER key. Ideally, you should be able to navigate through all of your visualization without a mouse, clearly be able to distinguish the element that is currently in focus, and be able to move between elements on the page in a predictable order.
Example mouse-dependent and keyboard-accessible buttons.

 

Explicitly label form fields.
If you have any form fields where users will enter information, make sure that you label the field with a persistent label outside of the form field, rather than using placeholder text that will disappear when the user starts to enter text. Similarly, place any hints or instructions outside the form field as persistent text. This has a range of benefits including not requiring users to remember what the field is for, and allowing label, instruction, and hint text to be freely resized outside the form field.

Example form field with information inside form as placeholder text and outside as permanent text.

 

Animation

Allow users to start, pause, or stop animation.
Whenever possible, allow your users to control and trigger any motion by providing options for them to start, pause, or stop animations and by not playing any motion such as videos automatically. This includes motion from live updating data, dynamically drawn charts, animated GIFs, or rotating carousels of images. If you must have automatic motion, make sure that it does not last more than 5 seconds.

 

Avoid flashing that could induce seizures.
Animations that flash at a rate of more than 3 times per second can potentially cause seizures and should be avoided. If flashing or intense animations are a part of your visualization, please refer to the Web Content Accessibility Guidelines (WCAG) for seizures for more information.

Provide audio descriptions.
In the same way that it is important to provide alt-text for static images, audio descriptions serve as alt-text for images that appear within a video or animation. Audio descriptions should be added for any important visual elements of a video that aren't already described in spoken word or captioned text. For example, if a graph or chart is displayed in a lecture video and the instructor does not describe it when speaking, an audio description would be beneficial to supplement the video.

 

Sound

Provide captions or transcripts for audio.
If you have audio that is functional rather than decorative, provide captions or text transcripts for users to experience the same content without audio.
 

Provide an option to turn sounds off.
Whenever possible, provide users with an option to pause or turn off any audio or sound effects. As well as being overwhelming for some users, audio that can't be stopped can interfere with speech based assistive technologies such as screen readers.