Accessibility

M Chart aims to make rendered charts usable with assistive technology out of the box. No configuration is required — the features below apply automatically to charts you embed via shortcode or the block editor.

Accessible data table fallback

Every interactive Chart.js chart is rendered alongside a hidden HTML data table that screen readers can navigate. The table is a real <table> with:

A <caption> carrying the chart title (and sheet name on multi-sheet charts)
A <thead> for the header row
scope attributes on header cells so rows and columns are announced correctly

This gives screen-reader users the underlying numbers in a structured form, even though the chart itself is drawn on a <canvas>.

Each chart's <canvas> carries three ARIA associations, all pointing at visually hidden (screen-reader-text) elements:

aria-labelledby → a <figcaption> holding the chart title, which serves as the chart's accessible name.
aria-describedby → a short summary paragraph (see below).
aria-details → the container holding the full data table described above, so assistive technology can navigate the underlying numbers as a real table rather than hearing them read as one long description.

The chart summary

The summary paragraph announced with the chart is:

The chart's excerpt, if you've written one — this is the place to put a human-written, one-or-two-sentence takeaway of what the chart shows.
Otherwise, an auto-generated summary built from the chart type, subtitle, source attribution, and the dimensions of the data — for example: "Line chart. Source: World Bank. Data table with 12 rows and 3 columns follows."

When a chart has source attribution enabled, the source also appears in its own screen-reader-only paragraph alongside the visible attribution painted on the chart.

For developers

You can append additional context (methodology, trend summaries, extended descriptions) after the data table in the aria-details container with the m_chart_screen_reader_text action hook.

Live region on the block picker

In the block editor, the M Chart block's chart-count message is an ARIA live region (role="status"), so screen readers announce the number of matching charts as you search.

Language attributes on embeds

Charts embedded via iframe output the site's language attributes on the embed document, so screen readers and browsers correctly identify the content language.