Guide
How to create accessible pie charts for low vision
How to create accessible pie charts and donut charts for audiences with vision loss, including visual and non visual A11Y.
One of the most popular topics in the accessibility space right now is accessible data visualizations and how to make graphs and charts accessible for people with vision loss- inclusive of blind, low vision, and visual impairment. Since this is such an emerging space, a lot of people have different answers for how to make information accessible for people with vision loss, and today I will be sharing my own answer for how to create accessible pie charts for low vision and blind users, based on my academic background in data science and experiences as a user with low vision.
WHAT IS A PIE CHART?
From Wikipedia:
“A pie chart (or a circle chart) is a circular statistical graphic, which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area) is proportional to the quantity it represents. While it is named for its resemblance to a pie which has been sliced, there are variations on the way it can be presented.”
Pie charts are typically used to show different parts or percentages of a whole. Donut charts are similar to pie charts though typically contain fewer sections than a pie chart since the center is cut out- a donut chart can show 2-5 different sections effectively, while pie charts are better for showing 5 or more sections.
WHAT DOES IT MEAN TO DESIGN AN ACCESSIBLE CHART?
When designing accessible pie charts, there are two different sets of considerations for creating charts- visual accessibility and nonvisual accessibility. Visual accessibility refers to the design of a chart, considering elements such as color choice, font size, and contrast, while nonvisual accessibility focuses on text-based descriptions that give information about the chart data, such as alt text and image descriptions that can be read with assistive technology. Both are equally important when designing for users with vision loss since people with low vision often use both visual and nonvisual accessibility tools to interpret charts and graphs, and people with disabilities other than vision loss benefit from reading content designed with visual and/or nonvisual accessibility in mind.
VISUAL ACCESSIBILITY FOR PIE CHARTS
HOW TO DESIGN ACCESSIBLE PIE CHARTS
- Avoid conveying information through color alone, and pair color-coded information with text labels. For a real-world example, consider that a stop sign not only has a distinctive red color, but it also has a unique shape compared to other signs and a bright red STOP label.
- Consider using textures instead of colors to convey information
- Use colorblindness-friendly color schemes- data visualization tools like Tableau often have these built-in
- Make sure that colors and labels are high contrast and can easily be recognized/read. An example of poor contrast would be having gray text on a white background, while black text on a white background would be easier to read
- Place labels next to data points, not inside them, as this is easier to access for people who use screen magnification compared to having to reference a legend
- For text on a colored background, add a thin white outline to black text to make it readable on any color background
- In visualization tools, set font sizes in rem instead of pixels so that they are easier to scale up/down- some tools do this automatically
RELATED LINKS
- Choosing High Contrast Color Schemes For Low Vision
- Zoom Magnifier and Low Vision
- My Eight Favorite Free Fonts For Print Disabilities
NONVISUAL ACCESSIBILITY FOR PIE CHARTS
WHAT IS ALT TEXT? WHAT IS AN IMAGE DESCRIPTION?
Alt text is a short, written description that displays in place of an image if the image fails to load that tells people what is in an image, such as text, colors, or basic essential details. Screen readers will read alt text aloud so that users who are blind or that have low vision can understand what is in an image. If someone fails to add alt text for an image, the screen reader will either simply say “image” or ignore the image entirely, which means that users miss potentially valuable visual content. If an image loads correctly, alt text is invisible to users that do not use assistive technology.
An image description is a longer description that is typically exposed, meaning anyone can see it whether they are using assistive technology or not, though users can also insert image descriptions in a similar manner to alt text that remain hidden. An image description serves as a descriptive caption, which is great for people with vision loss, language learners, or people with cognitive or processing disabilities. I recommend keeping image descriptions exposed or having a link to image descriptions in content so that users can benefit from the additional description.
HOW TO WRITE ALT TEXT AND IMAGE DESCRIPTIONS FOR PIE CHARTS
Since pie charts are visually simpler compared to more complex line or bar charts, users can include a lot of information when writing alt text and image descriptions for pie charts. Alt text and image descriptions should include the following information:
- The chart title and type, i.e pie chart of “What Day of the Week Received The Most Spam Calls?”
- Number of sections and total number of values- for example, there are 3,096 values in the chart about spam calls
- Values in the chart from highest to lowest, i.e Wednesday, 618 calls, Tuesday, 611 calls, etc
- When writing a short alt text description, users can mention the largest and smallest sections in the chart, and write out all of the sections in the extended image description
- In this case, color and section location are not particularly relevant, as the data is able to communicate all necessary information for understanding the chart
RELATED LINKS
- Seven Myths About Alt Text
- How To Add Alt Text On Social Media
- How To Access Images Without Alt Text
ADDITIONAL TIPS FOR HOW TO CREATE ACCESSIBLE PIE CHARTS
- Attach a link to the dataset used to create the pie chart when possible within the graph caption or document. This is often done with a csv file or an Excel/Sheets file
- Label the link to the dataset with a descriptive label such as ” data source” and avoid using nondescript labels like “x”
- Use descriptive titles for charts so that it is clear to the audience what the chart is about
- The methods used above also work well for violin charts, tree maps, and similar chart/graph types
By Veronica Lewis/Veronica With Four Eyes, www.veroniiiica.com
Back to Paths to Technology’s Home page
