Data visualisation accessibility

Accessible charts and infographics carry their numbers in a form everyone can reach: a short alt text, a long description, a real data table, labels printed on the chart, colours that pass contrast and a second cue besides colour. I make the charts in annual reports, ESG reports, statistics pages, websites, slide decks and PDFs accessible to WCAG 2.2 Level AA, as accessible SVG on the web and as tagged figures in PDF. Every job comes back with measurements and a plain list of what the checkers cannot judge.

This page is for you if one of these describes your situation:

• You publish an annual report, sustainability or ESG report as a web page or PDF, and its charts are pictures with no text behind them.
• You work for a public body or statistics office, and an accessibility audit flagged your charts: missing alt text, colour-only legends, contrast.
• You are an agency or designer delivering report layouts, and the client’s tender asks for WCAG 2.2 AA or EN 301 549.
• Your PDF fails PDF/UA checks on figures, and you do not know whether the problem is the chart, the layout or the export.
• Your infographics are single images: the key numbers cannot be selected, translated or read aloud.

• Select the numbers. Try to select a value or axis label, on the web page or in the PDF. If you cannot, the numbers exist only as pixels.
• Print it in black and white. If two series or two bars can only be told apart by colour, the chart fails WCAG 1.4.1 (Use of Color).
• Narrow the window to phone width. If the page scrolls sideways or the chart text shrinks to a grey blur, it fails reflow or simply cannot be read.
• Look for the table. No data table or download with the same numbers means a screen-reader user gets one sentence at best.

Read on for the technical detail. Below: what makes a chart accessible, a measured before-and-after example on real NASA temperature data with every file downloadable, what Chromium does to charts when it prints a PDF, and the rules in the EU and the US. To skip ahead, send one report and I will tell you what is wrong with its charts.

An accessible chart gives the same information to someone who cannot see it, tell its colours apart or zoom into it: as text, as a table and as a picture that does not rely on colour alone.

A chart is a complex image. Its alt text says what kind of chart it is and its main message in one sentence; a long description next to it gives the trend, the extremes and the key values; a data table gives every value (W3C WAI tutorial on complex images). No alt text can carry 146 data points.

A legend that says “green = annual, red = 10-year mean” fails anyone who cannot tell that green from that red. WCAG 1.4.1 requires a second cue: labels printed next to the line or bar, different line weights, dots, hatching.

Lines, bars and the parts of a chart needed to understand it must reach 3:1 against their background (WCAG 1.4.11). Chart text is text and needs 4.5:1 (WCAG 1.4.3).

At 320 CSS pixels wide, content must work without horizontal scrolling (WCAG 1.4.10). A chart exported as a 960-pixel image either forces sideways scrolling or shrinks until its labels are unreadable. An SVG chart can be laid out again for a narrow screen.

This is a measured worked example on real public-domain data, not client work. I built a deliberately typical “before” report page with three charts, rebuilt them accessibly, printed both to PDF and measured both with the same scripts. The “Climate report 2025” wrapper is an example layout, not a real publication.

• Data: NASA GISS Surface Temperature Analysis (GISTEMP v4), Global Land-Ocean Temperature Index, annual mean anomaly in °C relative to the 1951–1980 average. 146 years, 1880–2025.
• Retrieved: 6 October 2026 via the datasets/global-temp data package (annual.csv, branch main, rows Source = GISTEMP only), SHA-256 c9f98d4d…628c296e20.
• License: GISTEMP is a US Government work in the public domain; the data package repackaging is CC BY 4.0. Derived values: a 10-year trailing mean (1889–2025) and 15 decade means (the 2020s cover 2020–2025, six years).

The “before” state: matplotlib PNG charts in an HTML page, printed to PDF by headless Chromium with tagging on, so the failures come from the content. A light green and light red line chart identified only by a legend, rainbow decade bars with the decades only in the legend, and an “infographic” whose key numbers are part of a gradient image. No alt text, a fixed 960-pixel layout, no page title, no language.

Both charts are now hand-built SVG in three width variants (260, 600 and 880 px), chosen by CSS container queries, so chart text never shrinks below its design size. The line chart has role="img" with a title and description: annual values as a thin orange line with dots, the 10-year mean as a thick navy line, both labelled at their ends; the warmest (2024, +1.29 °C) and coldest year (1909, −0.49 °C) are annotated.

The bar chart is horizontal, every bar labelled with decade and value, below-average bars hatched navy, above-average solid orange; on the web page it is keyboard-explorable. Each chart has a visible long description with numbers generated from the data and an expandable data table (146 and 15 rows). The infographic became three stat cards in live HTML text.

The “after” PDF passes the veraPDF PDF/UA-1 profile with 0 failed checks; the “before” PDF fails 9. Chromium wrote both with tagging on; for the “after” file I also added the metadata PDF/UA asks for and marked untagged decoration as artifacts, which changed 0 bytes of the rendered pixels.

The 9 failures before: three figures without alt text (7.3-1), two pieces of untagged content (7.1-3), no PDF/UA identifier (5-1), no document title in the metadata (7.1-9) and a link without a description (7.18.1-2, 7.18.5-2). The Nu Html Checker found no HTML or ARIA errors in the “after” page; its 4 CSS errors come only from not knowing container queries.

A chart that works on the web page can lose its alt text or its whole tag on the way into PDF. What I observed in Chromium 141 in this run:

I did no screen-reader testing (NVDA, JAWS, VoiceOver or TalkBack) for this example. Gridlines are deliberately decorative at 1.25:1; the values are carried by labels and tables.

You receive charts that carry their information as text, as tables and as pictures that work without colour, plus measurements that show it.

• For each chart: a short alt text, a long description and a data table, with the numbers checked against your data.
• Accessible SVG charts for the web, or corrected figures and tables in your layout file, depending on where the report is made.
• A tagged PDF if you publish one, with its PDF/UA-1 result and the reason for any remaining failure.
• A colour note: which chart colours pass 3:1, which pairs collapse under colour-vision simulation, and the smallest fix.
• A findings report, including what the checks cannot see.

You send one real report or chart set first; the price is fixed before any work starts.

1. Send one file, ideally with the data behind the charts (Excel or CSV). I tell you what is wrong, including the parts not worth paying to fix.
2. You receive a scope and a fixed price for that report or the whole set.
3. I do the work. You receive a preview, marked as such, with the measurements, the descriptions for your review and any proposed colour changes.
4. Your approval releases the final files, the PDF and the findings report.

I price each job after seeing the material. Twenty bar charts from one template can take less time than one dense infographic or a map. You get a fixed price for the set before work starts, with no hourly meter. When the charts come from one template or style sheet, fixing that first is usually cheaper, and I will say so.

EU public bodies must publish accessible content, the European Accessibility Act now covers many consumer services, and reports carry more charts than ever. What that means for you is a legal question.

• EU public sector: the Web Accessibility Directive (EU) 2016/2102 covers public bodies’ websites, apps and the documents on them; charts in statistics pages and reports are part of that content.
• The standard: EN 301 549 V3.2.1, cited by Implementing Decision (EU) 2021/1339, applies the WCAG 2.1 success criteria to web content (clause 9) and documents (clause 10). I work to WCAG 2.2 AA and report against both when a tender asks.
• EU private sector: the European Accessibility Act, Directive (EU) 2019/882, applies from 28 June 2025 to the products and services it lists.
• Sustainability reporting: the CSRD, Directive (EU) 2022/2464, puts sustainability information into the management report; Directive (EU) 2025/794 postponed later application dates. It governs what is reported, not chart accessibility.
• United States: the ADA Title II rule covers state and local government web content, including PDFs. After the April 2026 extension, the deadlines are 26 April 2027 (50,000 people or more) and 26 April 2028 (smaller entities), at WCAG 2.1 AA.

Legal note: this page covers the technical side. Whether a law applies to your organisation or report is for your legal adviser to confirm.

Not for a chart with more than a handful of values. The alt text gives the type and the main message in one sentence; the long description and the data table carry the detail. In the worked example, the line chart has 146 values, and all 146 are in a table.

Only with your agreement. I measure every series colour against the background and against the other series, simulate colour-vision deficiencies, and propose the smallest change that passes. Often a second cue such as hatching or direct labels lets you keep most of a palette.

The worked example does not cover chart libraries or BI tools, and each has its own accessibility settings. I handle exported and static charts and hand-built SVG; library-specific work I quote case by case after seeing your setup.

It depends on the tool that writes the PDF, and I tell you per file. In the worked example, the Chromium-printed PDF passed the veraPDF PDF/UA-1 profile with 0 failed checks after the fixes described above. Machine checks cover only part of PDF/UA; reading order and alt quality need human review.

The report or page, and if possible the data behind each chart as Excel or CSV. Without the data, I take the values from the chart and you confirm them before anything is published.

No, and I do not claim otherwise. My findings come from the files, the standards and the checkers. Testing by people who use assistive technology should be commissioned separately.

• Multilingual PDF accessibility (PDF/UA)
• Alt text writing
• Accessible colour palette
• Accessible Word and PowerPoint
• Accessible Excel
• Accessible EPUB
• Accessible math with MathML
• VPAT and Accessibility Conformance Report

One file — the report, statistics page or infographic that worries you most, with its data if you have it. You get back a straight account of what is wrong with its charts, including the parts that are not worth paying to fix.

Ali Karabüyük · Tekirdağ, Türkiye · working remotely with clients worldwide · document and image production since 2004, professional practice since 2008.