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.

Graphic: How to create accessible pie charts for low vision.

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

RELATED LINKS

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:

RELATED LINKS

ADDITIONAL TIPS FOR HOW TO CREATE ACCESSIBLE PIE CHARTS

By Veronica Lewis/Veronica With Four Eyes, www.veroniiiica.com

Back to Paths to Technology’s Home page

SHARE THIS ARTICLE
stick characters sitting facing each other with speech bubbles overhead.
Guide

How my guidance counselor helped me as a low vision student

Butterfly life cycle
Activity

Butterflies part 2: Butterfly life cycle

Smiling woman sitting on a campus bench studying on her laptop.
Guide

Reading Chegg eTextbooks with low vision