Chart Blocks: Accessible Graphs With Honest Axes

A chart block is a bounded data display that combines a graph with its takeaway, title, labels, source, period, and accessible data alternative. Use it when the shape of the data answers the question faster than a row of exact values can.

Why this element matters

Charts exploit visual pattern recognition. A reader can detect a rise, gap, cluster, or change in slope before comparing the same values cell by cell. That helps when the pattern—not precise lookup—is the point. It is also dangerous: cropped axes, unequal intervals, or area effects can make a small difference look decisive. A chart earns its place only when it reduces effort without changing the evidence.

Reader psychology makes the written takeaway essential. People may remember a direction or relative size more readily than a footnote. State the bounded conclusion in text, including the population and period when needed. Never claim causation from correlation or a general trend from a selected interval.

Machine extractability requires series names, labels, values, units, source, period, and conclusion as text. A crawler or AI answer engine may not interpret an SVG path, canvas, screenshot, hover state, or color legend. The block therefore pairs the visual with ordered data for assistive technology, indexing, verification, and reuse.

The element writing rules take precedence: select this element because a passage’s purpose is to reveal a quantitative pattern, not because a graph would decorate the page. If the task is exact lookup or item-by-item comparison, use a table even when charting software is available.

When to use it

Use a chart when the reader needs to see one of four shapes: change over an ordered sequence, differences across a manageable set of categories, the distribution of observations, or the relationship between two quantitative variables. A line chart can reveal direction over time; a bar chart can rank categories; a histogram can reveal distribution; and a scatter plot can reveal association and outliers. The dataset must be complete enough, consistently measured, and relevant to the claim.

A simple test separates chart from table: if the reader should first notice a pattern, choose a chart; if they should find an exact value, choose a table. If both matter, include a compact table within the chart block so the two outputs cannot drift.

Common near misses include:

• Two values: write a sentence or small comparison. Two bars rarely reveal a pattern more directly.
• A long category list: use a grouped table. Thirty bars create label and mobile-layout problems.
• A few headline metrics: use a stat band when the figures are independent highlights rather than one series.
• A process or chronology: use a timeline when marks do not encode quantity.
• A causal claim from an association: a scatter plot may show that two variables move together; it cannot establish that one caused the other.
• A decorative “data story”: if removing the chart loses no conclusion, remove it.
• A comparison with long qualitative criteria: use a comparison table because categories such as support policy or implementation fit cannot be encoded honestly as bar length.

Ready to Monitor Your AI Visibility?

Track how AI chatbots mention your brand across ChatGPT, Perplexity, and other platforms.

Get Started Contact

Where to place it

Place the chart after the paragraph that introduces the question, population, measure, and period. Put the takeaway directly before or after it, then explain implications and limitations. In research, each chart belongs beside its finding. In a case study, establish the baseline and intervention before showing change.

Keep the title, visual, legend, takeaway, data alternative, source, and notes in one figure boundary. Footnotes may follow the figure, but an advertisement, signup form, or unrelated image may not interrupt it. The source should be visible without opening the data alternative.

Do not place it beside an equally prominent chart, an independent table or stat band that repeats its data, a price table, carousel, or high-emphasis call to action. These pairings compete or create multiple sources of truth. Separate data displays with explanation.

Anatomy

The labelled screenshot must identify these regions:

1. Takeaway: one sentence stating the pattern without the picture.
2. Figure title: a neutral description of measure, population, and period.
3. Plot: the region where position, length, or direction encodes values.
4. Axes and scales: visible labels, units, ticks, intervals, and baseline.
5. Series labels: direct labels where possible; otherwise a legend that is not color-only.
6. Annotation: an optional note tied to a data point, never a methodology substitute.
7. Data alternative: a table or ordered text containing the plotted values.
8. Caption and source: scope, provenance, reporting period, and any calculation note.

Stay Updated on AI Visibility Trends

Get the latest insights on AI mentions, brand monitoring, and optimization strategies.

Email address

Subscribe

Design examples

Every variant uses two-dimensional marks, visible units, a takeaway, source data, and an accessible alternative. There is no 3D, pictogram, gauge, or dual-axis variant because decoration and competing scales distort comparison.

Line chart: use for values measured at consistent ordered intervals, usually time. Missing observations must appear as gaps rather than invented connections. More than four series normally requires splitting the chart or choosing a table.

Bar chart: use for comparison or ranking across discrete categories. Start the quantitative axis at zero because bar length represents magnitude. Prefer horizontal bars when labels are long, and sort by value unless a natural order carries meaning.

Scatter plot: use for the relationship between two quantitative variables. Show individual observations, name both measures, disclose any fitted trend line, and avoid causal language unless the research design supports it.

Stacked bar chart: use when both total and composition matter across a small number of groups. Keep segment order stable and limit the stack to four categories. If readers mainly need to compare each component, use grouped bars or small multiples instead.

Parameters

“Source” below means the authored location from which the renderer obtains the field, not the evidence provider cited by the chart.

show-data=false is permitted only when an equivalent data table or complete value-by-value text alternative is already programmatically associated with the figure. It is never a license to publish a visual-only chart.

Syntax and code examples

All three notations preserve the same title, takeaway, dataset, scale, source, period, and alternative text. The figures are illustrative.

Portable Markdown directive

:::chart-block{type=bar y-label="Requests" y-min=0 source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4."}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

The first heading maps to title; the takeaway and canonical data table map to body fields.

Hugo shortcode

The Hugo adapter uses named parameters and derives the visual and table from one body dataset. This notation specifies the intended mapping.

{{< chart-block type="bar" yLabel="Requests" yMin="0" source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4." >}}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress block

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrative support requests by quarter","yLabel":"Requests","yMin":0,"source":"Illustrative editorial dataset","period":"2026 Q1–Q4","alt":"Requests decrease in every quarter, from 120 in Q1 to 72 in Q4.","takeaway":"Requests decline each quarter, from 120 in Q1 to 72 in Q4."} -->
<table><thead><tr><th>Quarter</th><th>Requests</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

The block may render SVG or canvas, but saved and server-rendered output must retain the takeaway and table. JavaScript may enhance interaction, never supply the only labels or values.

Examples

Good: the visual and words tell the same bounded story

Takeaway: In the illustrative dataset, median resolution time falls from 18 hours in January to 12 hours in April; the chart does not establish why.

The line chart uses even monthly intervals and a labelled “Hours” axis from 10 to 20. That disclosed non-zero line scale is appropriate because position, not bar length, encodes values. The table exposes every point, and the text does not attribute the decline to an intervention.

Bad: the graph manufactures urgency

A bar chart titled “Resolution time collapses after launch” shows the same 18-, 17-, 14-, and 12-hour values on an axis that begins at 11.5. The bars appear to shrink almost to nothing. January is labelled “before,” April “after,” intermediate months are hidden behind hover, and neither the intervention date nor a source is shown. Red-to-green color supplies the only performance meaning.

This fails because bars require a zero baseline, the title asserts causation, and selective labels prevent verification. Hover-only values exclude keyboard, touch, extraction, and assistive-technology contexts. Repair it with a zero baseline or clearly scaled line, every observation, source, period, data table, and a non-causal takeaway.

Schema markup and accessibility

Schema.org has no general Chart or Graph type. A chart remains evidence within an eligible page-level entity such as Article, Report, or Dataset. Research may describe a real downloadable dataset with properties such as temporal coverage, variables, creator, and distribution. Never invent a dataset, rating, trend, or result property because a chart exists.

Accessibility requires more than alt text. Give the figure a title and caption and an SVG an accessible name and description. Canvas needs an equivalent DOM representation. Supply plotted values in a table with real headers, and keep the takeaway outside the graphic so it survives printing, extraction, and image failure.

Do not use color as the only series identifier; add direct labels, line patterns, point shapes, or text. Tooltips must be keyboard reachable, dismissible, and supplementary. At 200% zoom and narrow widths, reflow or scroll a labelled chart region without creating page-level scrolling.

Respect reduced-motion preferences and avoid animated drawing or automatic transitions. If filters change data, announce the state and show active filters in text. A static chart is not a keyboard target unless it has real controls.

Writing rules

These rules keep the chart’s visual authority proportional to its evidence:

• Write one takeaway of 15–35 words. Name the direction or relationship, relevant endpoints, population, and period when they prevent ambiguity.
• Use 2–20 points per series and no more than four series. Split denser work into small multiples, a table, or a downloadable dataset.
• Keep titles to 5–16 words and labels to 1–6 words. Titles describe; takeaways conclude.
• Use the same unit and measurement definition throughout a series. If a method changes, break the line and explain the discontinuity.
• Start bar and stacked-bar quantitative axes at zero. A line or scatter scale may be narrower only when bounds and units remain visible and the choice does not exaggerate noise.
• Use equal visual spacing for equal numeric or time intervals. Do not space February and December as if they were adjacent months when intervening periods are missing.
• Show missing values as missing. Never convert them to zero, connect across them silently, or interpolate without a stated method.
• Label projections, estimates, modeled values, and seasonally adjusted values directly. Do not style them as observed data.
• Avoid dual axes, 3D effects, perspective, pictorial area scaling, broken axes, rainbow palettes, and smoothed curves that imply unmeasured values.
• State the source, coverage period, sample or cohort where relevant, and any transformation such as indexing, normalization, or rolling average.
• Never put a call to action, testimonial, promotional badge, unsupported causal claim, or essential caveat only inside the image.
• Derive the graph and its table from one canonical dataset. If values change, update once and regenerate both outputs.

Detailed methodology and citations may continue in a nearby sources block , but the chart still needs a visible source and period of its own.

Post types that use it

The postTypes frontmatter field defines the approved relationships below. Inclusion permits a chart when a real quantitative pattern exists; it does not require authors to manufacture a graph for every page.

QA checklist

• The reader’s primary task is to see a pattern; exact lookup alone would be better served by a table.
• The takeaway is a complete sentence in HTML text, agrees with the plotted data, and stays within the evidence.
• The title names the measure, population, and period needed to understand the figure.
• The chart type matches the analytical task: sequence, category comparison, distribution, or relationship.
• Bar baselines begin at zero; every other scale is visible, justified, and non-deceptive.
• Intervals, units, denominators, calculations, and missing values are represented honestly.
• Series are directly labelled or distinguishable without color alone.
• Every essential value is available without hover, JavaScript, animation, or image interpretation.
• A data table or complete text alternative uses real headers and matches the visual exactly.
• The source, coverage period, cohort or sample, and transformations are visible beside the chart.
• The chart and accessible alternative derive from one canonical dataset.
• The block does not sit beside a duplicate data display, conversion module, or competing high-emphasis visual.
• The chart works with keyboard input, high-contrast settings, 200% zoom, narrow screens, and reduced motion.
• No 3D effect, dual axis, broken axis, pictorial scaling, unsupported causal claim, or decorative series remains.
• Any page-level structured data is eligible and consistent with the visible evidence.
• The selected post type includes the chart block in its content contract.

FAQ

When should I use a chart instead of a table?

Use a chart when the first task is seeing a trend, distribution, ranking, or relationship. Use a table when readers need precise lookup across many fields. When both tasks matter, keep a compact table inside the chart block as its accessible data alternative.

Must a bar chart start at zero?

Yes. Bar length represents magnitude from a baseline, so cropping that baseline changes the apparent ratio. A line chart may use a non-zero scale when the visible range and units are explicit and the narrower view is analytically necessary.

Is alt text enough to make a chart accessible?

Usually not. Alt text should identify the display and summarize its main pattern. A multi-value chart also needs a nearby data table or equivalent text containing the labels, values, units, source, and period.

Can the takeaway appear only in the chart title?

No. A title identifies what the figure shows; a takeaway states what the reader should notice. Keep the takeaway as a complete sentence outside the graphic so it remains available when the image is not perceived or extracted.

Does a chart block create Schema.org markup?

No. Use valid page-level markup such as Article, Report, or Dataset only when the page independently qualifies. The chart does not create a new schema entitlement or justify structured claims that are absent from visible evidence.