Charts, graphs and infographics accessibility: impact reports, results and data on small websites

Charts, graphs and infographics show up on small websites more than people expect: a nonprofit's year-end impact report, a church's building fund thermometer, a financial advisor's "growth of $10,000" chart, a gym's member results, a school district's test scores, or a real estate agent's local price trends. A chart that is only a picture leaves out anyone who can't see it clearly, including people using screen readers, people with colour blindness and people zooming in on a phone. This guide covers how to make them work, whichever website builder or chart tool you use.

1. Say the main point in words first

Before any chart, write one or two sentences that say what it shows, such as "Meals served rose from 12,400 in 2025 to 18,900 in 2026." This helps every visitor, not just screen reader users, and it is often the only thing people read. A chart image needs a text alternative that gives the same information (WCAG 1.1.1). For a simple chart, short alt text with the key numbers is enough. For a detailed chart, keep the alt text short and put the full data next to it as text or a table.

<figure>
  <img src="meals-chart.png"
       alt="Bar chart: meals served rose from 12,400 in 2025 to 18,900 in 2026.">
  <figcaption>Meals served per year. <a href="#meals-data">See the numbers as a table</a>.</figcaption>
</figure>

(The numbers above are example data.) See alt text examples. If an AI tool wrote the alt text for you, check every number it gives; see reviewing AI-generated alt text.

2. Give the data as a real table

For charts with more than a few numbers, add the data as an HTML table with header cells, right below the chart or behind a "Show the data" control (WCAG 1.3.1). A table can be read by screen readers, copied, translated and zoomed. A screenshot of a spreadsheet can't.

<table id="meals-data">
  <caption>Meals served per year</caption>
  <tr><th scope="col">Year</th><th scope="col">Meals served</th></tr>
  <tr><th scope="row">2025</th><td>12,400</td></tr>
  <tr><th scope="row">2026</th><td>18,900</td></tr>
</table>

See accessible tables.

3. Don't rely on colour alone

A pie chart or line chart where the only way to tell slices or lines apart is colour fails people with colour blindness (WCAG 1.4.1). Label slices and lines directly with text, add patterns or different line styles and markers, and avoid red-versus-green pairs. Bars, lines and slices need enough contrast against the background and each other (3:1, WCAG 1.4.11), and labels and numbers need normal text contrast (WCAG 1.4.3). See colour-only meaning and the colour contrast checker guide.

4. Infographics: keep the words out of the picture

An infographic that is one tall image with all the facts baked in is a wall of silence for screen readers, can't be translated, and turns blurry or tiny on a phone (WCAG 1.4.5). Put the same facts on the page as normal headings, lists and paragraphs, and use the graphic as decoration or a summary. If you share the infographic on social media too, the web page with the text version is the one to link to. See flyers and images of text.

5. Interactive and embedded charts

• Charts embedded from chart tools, spreadsheets or dashboards usually sit in an iframe. Give it a title that says what it is, such as title="Chart: donations by month, 2026" (WCAG 4.1.2).
• If people can filter, switch years or open details, those controls must work with the Tab key, Enter and Space (WCAG 2.1.1) and have visible names.
• Numbers that appear only when you hover over a bar must also appear on keyboard focus, stay put while the pointer is over them, and close with Escape (WCAG 1.4.13). Better: show the key numbers as labels all the time. See tooltips and info icons.
• Check the chart at 400% zoom or on a narrow phone. If it gets cut off or needs sideways scrolling to read the text, the table version matters even more (WCAG 1.4.10).
• Animated counters and charts that grow on scroll should be short or respect the visitor's reduce-motion setting; see animation and motion.

6. Progress bars, goal thermometers and counters

A fundraising thermometer or "73% of our goal" bar needs the actual numbers in text next to it, like "$36,500 raised of our $50,000 goal". If it is built as a progress bar in code, a real <progress> element with a label is announced properly. See GivingTuesday and year-end donation pages.

7. Annual reports and PDFs

Many impact reports and annual reports are posted only as a designed PDF full of charts. Put the main facts and the charts' data on a web page, and offer the PDF as an extra. If you keep the PDF, its charts need alt text and its tables need tagged headers. See accessible PDFs.

Common mistakes

• A chart image with alt text of "chart" or the file name.
• Key numbers shown only on hover.
• A legend that matches lines to labels by colour alone.
• A full impact report posted as one tall infographic image.
• A goal thermometer with no amount written in text.
• An embedded dashboard that keyboard users can't get out of.

A 5-minute check you can do today

1. Find every chart, graph and infographic on your site. Is the main point written in a sentence nearby?
2. Check each image's alt text, or ask your web designer. Does it say what the chart shows, with the key numbers?
3. Look at the chart in greyscale (most phones have a colour filter setting). Can you still tell the lines or slices apart?
4. Press Tab through any interactive chart. Can you reach and read everything that hovering shows?
5. Zoom your browser to 200% and then open the page on your phone. Can you still read the labels?

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan can flag chart images with no alt text, iframes with no title, tables without headers and many text contrast problems. It can't tell whether alt text gives the right numbers, whether lines or slices can be told apart without colour, or whether your site meets any law. Our Fix-Pack checks up to 10 pages, which can include your impact report or results page, and gives copy-paste fixes for your platform.

Building reports or dashboards for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any chart tool, website builder or spreadsheet app.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Announcement bars, holiday hours and closure notices: accessible banners for small business websites
• QR codes and QR code menus: making the pages they open accessible
• Email newsletter and SMS signup forms: accessible signup boxes and pop-ups
• Photo galleries and lightboxes: accessible image grids for small business sites

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.