Creating accessible infographics and charts

Complex graphics, such as infographics or charts, pose issues for screen readers. Unlike a text document, a screen reader cannot identify text within decorative elements unless the document is “tagged” with alternative text.

Infographics
Charts

Transcripts for infographics

A transcript is a text description of an infographic that screen readers can read. Transcripts provide the text-equivalent information. A transcript can be presented in the following ways:

  • The transcript of information can be included directly below the infographic as regular text.
  • Ensure that the same information is included in the transcript as in the infographic. Do not editorialize.
  • Ensure the reading order presents the information in a logical sequence.
  • Include a “highlights” section for readers seeking facts quickly.
  • A transcript can also be linked (link to a separate document or page with the transcript). In this case, provide a descriptive link to the transcript directly below the image infographic.
  • Unless an image is meaningful in that it provides additional information or context, do not describe the creative element.

For example, when transcribing that “18% of Canadians reported symptoms of moderate to severe anxiety”, we would not mention that the information was positioned on top of a map of Canada. Just the fact would be included in the transcript.

Transcribed Infographic Example

Mental Health of Canadians During the Covid-19 Pandemic Infographic

Perceived Mental Health

In May 2020, 48% of Canadians reported having excellent or very good mental health. However, this was 6 percentage points lower than it was at the end of March.

First online survey results, March 29 to April 3rd, 2020

  • Excellent or very good 54%
  • Good 28%
  • Poor or Fair 18%

Second online survey results, May 4th to May 10, 2020

  • Excellent or very good 48%
  • Good 30%
  • Poor or Fair 22%

Moderate to Severe Anxiety

There were 18% of Canadians who reported symptoms of moderate to severe anxiety in the previous two weeks. All the regions reported similar rates.

  • Youth aged 15 to 24 27%
  • Adults aged 25 to 64 19%
  • Seniors aged 65 and older 10%

Women were more likely than men to report symptoms consistent with moderate or severe anxiety.

  • Women 21%
  • Men 15%

There are many things you can do to help improve your physical and mental health during stressful times.

Here is what Canadians reported doing in May:

  • Communicated with friends and family 37%
  • Meditated 12%
  • Exercised outdoors 57%
  • Exercised indoors 40%
  • Changed food 23%

Infographic Source: Mental Health of Canadians During the Covid-19 Pandemic, Statistics Canada, statcan.gc.ca

Example of an infographic that outlines the mental health of Canadians during the COVID-19 pandemic.

Key Findings

  • Canadians reported excellent or very good mental health of 48% in May which is down 6%.
  • Those feeling good increased by 2% and those feeling poor or fair increased by 4%.
  • These are not huge gains or losses but indicate those who wee feeling excellent or very good are moving into the goo or poor or fair category as the Covid-19 pandemic continues to impact the daily lives of Canadians.
  • Youths aged 15 to 24 made up the largest segment of the population to report moderate to severe anxiety.
  • 21% Of Women reported symptoms consistent with moderate or severe anxiety in contrast to just 15% of men.
  • Canadians exercised and communicated with friends and family to improve their mental health during the month of May.

Descriptions for charts

Providing a clear and concise description is essential for making charts on your website accessible to users with visual impairments. A description allows screen readers to convey the chart’s purpose, structure, and key takeaways effectively. This description should include the following:

  • Chart type – Specify the type of chart (e.g., pie chart, bar graph, line chart) to help users understand how the data is visually represented.
  • Title and text details – Include the chart’s title along with a transcript of any labels, data points, legends, or figures that appear within the chart.
  • Key insights – Provide a brief summary of the main trends or patterns illustrated in the chart. Focus on the most critical takeaways.
  • Alt text – if your chart is uploaded to the website as an image, it’s important that you also include alt text. Unlike a full description, alt text can be more concise while still conveying the most important information and should include a note indicating “Full chart description below.”

Alt text example: Pie chart titled “Planned Brock University RSF Expenditures, 2023-2024” depicting the planned expenditures for various categories. Full chart description below.

Chart Description Example

Pie chart titled "Planned Brock University RSF Expenditures, 2023-2024" depicting the planned expenditures for various categories. Full chart description below.

Chart description: Pie chart titled “Planned Brock University RSF Expenditures, 2023-2024” depicting the planned expenditures for Brock University Research Support Fund (RSF) for the fiscal year 2023-2024. The chart highlights six categories: Management & Administration ($1,601,843), Intellectual Property ($483,096), Regulatory Requirements & Accreditations ($213,579), Research Facilities ($114,417), and Research Resources ($129,673). Each category is represented by a distinct color segment, with the largest portion allocated to Management & Administration.