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 scopeattributes 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>.
Screen-reader description and source attribution
Each chart includes a screen-reader-text description container wired to the canvas through aria-describedby, so assistive technology associates the description with the chart. When a chart has source attribution, that text is included here as well.
For developers
You can append additional context (data sources, methodology, trend summaries) to this 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.
