Pie Charts

Tutorial

Example

  %%{init: {'theme': 'neutral'}}%%
pie showData
    title
    "United States" : 70
    "United Kingdom" : 15
    "Canada" : 10
    "from other countries" : 5

accTitle: Percentage non-native English speakers in major English-speaking countries
accDescr: The pie chart shows the percentage of non-native English speakers in the major English-speaking countries of the world from 2000 to 2002.

Guidelines for Describing Pie Charts

Avoid redundancies

Alternative text should not use the phrases “image of…” or “graphic of…,” or be redundant (use the same description as the body text).

Avoid visual qualities

It’s not necessary to describe the visual attributes of the charts (i.e., orange wedge, gray lines) unless it is an exam question that refers to these attributes.

Order objectively

List numbers from largest to smallest regardless of how they are presented in the image.

You don’t need to describe colors unless they carry meaning beyond distinguishing segments—for example, if red indicates “danger” categories.

Alternative Format Options

Text description with bulleted list works well for most pie charts.

The pie chart shows the percentage of non-native English speakers in the major English-speaking countries of the world from 2000 to 2002.

  • 70% from United States
  • 15% from United Kingdom
  • 10% from Canada
  • 5% from other countries

Data tables work when precise values matter or when comparing multiple pie charts.

CountryPercentage
United States70%
United Kingdom15%
Canada10%
Other countries5%

Common Mistakes to Avoid

  • Describing colors instead of data — “The blue section is largest” tells a screen reader user nothing
  • Omitting the total — Always clarify what 100% represents
  • Listing in visual order — Order by size (largest to smallest) for clarity, not by clockwise position

Where to Place the Description

Give the description a heading and reference it in the alt text, or otherwise make sure the relationship between the description and image is clear. If the description is placed at the end of the document use #heading reference links to move back and forth.

This article is an adaptation of ‘Complex Images for All Learners’ by Supada Amornchat, used under CC BY-NC-SA 4.0.