Skip to content

Beyond the Chart: A Guide to Accessible Data Visualization

Note: The information and guidelines presented in this blog post are for non-interactive data visualizations.

Who doesn't love a good pie chart or bar graph? I'll tell you who: someone who's color blind or uses a screen reader. 

Creating accessible charts and graphs is not difficult. It just requires some planning.

In this blog post, I'll guide you through planning your accessible charts and graphs. We'll start by understanding the needs of different users and then move on to choosing the right chart type. Finally, we'll discuss the importance of color contrast, data points, labels, and alternative text.

Different Users, Different Needs

Visual Needs

Data charts rely heavily on visual elements. To ensure your visualizations are accessible to people with visual impairments, consider the following WCAG guidelines. I've also included some AAA criteria for organizations aiming for the highest level of accessibility compliance.

Cognitive Needs

The visual nature of different charts and graphs can also present challenges that increase cognitive load. The more the cognitive load can be reduced, the less likely information will be misinterpreted, misunderstood, or overlooked entirely. You can help reduce cognitive load by:

Planning an Accessible Chart or Graph

  • Choose the appropriate chart for your data type. A simple, accessible table is always a good choice.😉 Some of the more popular charts are:
    • Bar Charts: used to compare categories or show changes over time.
    • Line Graphs: used to illustrate trends and patterns.
    • Scatter Plots: useful when identifying correlations and relationships between variables.
    • Maps: used for geographic data and spatial patterns.

  • Choose an accessible color palette. Make sure that the pallet is colorblind compatible. Include colors for
    • Background - for best contrast results, keep this white
    • Bars / lines / pie slices color
    • Text color
      Color contrast rules apply. Not only should you meet the 4.5:1 ratio requirement for background and foreground (pie slice, for example), but that same contrast ratio should be applied to adjacent data representation elements in your chart—for example, pie slices, bars, lines, etc. An easy solution for most adjacent elements is to place a white line divider.
      A pie chart with purple, moss green, brown, gold and grass green slice colors, each with a pattern and white divider lines between each slice.
  • Choose pattern styles for bar graphs and pie charts. More on pattern use in the Best Practices section of this blog.
    Example of a bar chart with different fill patterns in each bar.
    Courtesy of JMP User Community
  • Choose an accessible font from this list:
    (Courtesy of UNC Greensboro )
    • Verdana (sans serif)
    • Tahoma (sans serif)
    • Arial (sans serif)
    • Lucida Sans (sans serif—Windows)
    • Lucida Grande (sans serif—Mac)
    • Book Antiqua (serif)
    • Helvetica (sans serif)

Best Practices for the Best Charts and Graphs

  • If possible, provide a summary of what your chart is trying to convey.
  • Provide an accessible method for linking to the underlying data set so that people can explore the data independently.
  • Use patterns sparingly. If you have several data representation elements in your chart (my limit has always been 3), each with a different pattern, your chart can become overwhelming and cluttered.
    Example of a bar chart with 5 bars, each bar is a different color and has a different fill pattern.

    Instead, consider using labels to identify your data. In this example, the labels chosen are numbers. Notice that the color of the numbers changes depending on the color of the bar; therefore, maintain proper color contrast.
    Example of a bar chart with 5 bars, each with the fill patterns removed and replaced with data labels.
    Courtesy of Dax Castro, Adobe MAX Extra - Accessible Charts and Graphs

  • provide text descriptions for your chart:
    • Provide an alternative text description.
      The thought of writing alt text for a complex data visualization might seem a little intimidating. Amy Cesal, in her article "Writing Alt Text for Data Visualization," provides an excellent formula for creating appropriate and useful alt text: alt=Chart Type of Type of Data where Reason for Including Chart. In addition, the W3C has a tutorial on Complex Images that offers several helpful tips on providing essential information conveyed by the image to screen reader users.
    • Provide a caption.
    • Text description on the page.
    • Link to external text description.

The steps and best practices discussed in this blog post are not exhaustive, but they will help you start building accessible data visualizations that communicate your information more easily and effectively.

Final thought: Don’t forget the three C’s of data visualization: Clarity, Consistency, and Context.

Resources

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot