The example supplies an initial HTML table and summary for all four categories. A scenario button supplies Revisions = 2, updating the table, known sum and supplemental chart to ten artifacts with four of four counts known. Restore unknown returns the partial eight-artifact snapshot; the table remains the primary data view.
Decide whether the canvas adds useful information
MDN explains that a canvas is a bitmap without the object semantics exposed by ordinary HTML, and discusses alternative content. That limitation is the reason to keep meaningful data available outside the drawing. The Canvas Element
Consider a native HTML table or an SVG/native chart alternative before adding canvas. Even if a canvas is retained for visual comparison, do not make its pixels the only route to the values. An SVG choice also needs a suitable information structure and testing; the format name alone is not an accessibility result.
Define the original dataset and its coverage
Use this fictional dataset, with unit named artifacts:
| Category ID | Category | Count | Data state |
|---|---|---|---|
| A | Notes | 3 | Known |
| B | Sketches | 5 | Known |
| C | Diagrams | 0 | Known zero |
| D | Revisions | Unknown | Count not supplied |
The known sum is 3 + 5 + 0 = 8 across three known categories out of four. The correct summary is “8 known artifacts; one category lacks a count.” It is not a complete total of eight artifacts across all four categories.
This is a prepared example, not evidence of actual learner production. Maintain category IDs and keep zero distinct from a missing count in the source data record.
Specify the semantic information first
The HTML document contains a meaningful heading, the summary, and a table with a caption, category row labels, count column and stated unit. All four rows remain visible, including Diagrams = 0 and Revisions = Unknown.
Provide this information as initial HTML rather than creating it only after successful chart scripting. If script is disabled or drawing fails, the baseline table and explanation must still be available. Keep any fallback inside the canvas consistent with the surrounding information; do not rely on fallback rendering alone to satisfy every reader's access to the data.
A concise canvas label may identify the graphic, but it cannot replace the detailed category/value/unknown information. Keep the table visible beside the canvas. The example hides the supplemental chart from the accessibility tree so its pixels do not compete with the detailed HTML information.
Draw the same meaning, not a different dataset
The supplemental graphic shows known bars for 3, 5 and 0, plus a separately labeled unknown marker for D. Do not plot D as a zero bar. C's zero remains an explicit table value even if its bar has no visible height.
Use one data model to derive the graphic, table and summary. Include units, labels and a clear distinction between zero and missing data; a color difference alone should not carry that distinction.
For a separate fixed scenario, supply D = 2. The known sum becomes 10, with four of four counts supplied. The table, graphic and summary must all update to that same snapshot, or retain the previous consistent snapshot if the update fails. A chart showing D = 2 beside an “8 known artifacts” label is stale evidence.
Review both states
Press Supply Revisions = 2, then compare the revised table row and summary before inspecting the bars. Press Restore unknown to return to the starting snapshot. The drawing is optional: if a drawing context is unavailable, the table still supplies the counts and coverage. Controls sit outside the canvas and need no pixel targeting.
A chart label cannot replace the data. Review the page with your intended keyboard and assistive-technology setup before making accessibility claims. The example demonstrates a data-equivalence approach; it is not a conformance certificate.
Copy this prompt
Build an original HTML-first chart explanation for fictional named artifacts. Initial data: A Notes 3, B Sketches 5, C Diagrams 0, D Revisions unknown. Put a heading, semantic table with caption and row headers, explicit unit, summary and coverage directly in the initial HTML, so they exist without JavaScript or canvas drawing. The correct initial summary is “8 known artifacts; one category lacks a count.” Coverage is 3 of 4 categories. Do not call eight a complete total across unknown data.
Add a supplemental noninteractive canvas using the same maintained data as the HTML summary and table. Mark the canvas decorative relative to the detailed HTML information. Draw counts 3 and 5, label the known zero explicitly, and show an unknown marker for Revisions rather than plotting it as zero. Provide two native buttons outside the canvas: Supply Revisions = 2 and Restore unknown. The supplied-count scenario must change the table, summary and chart to 10 known artifacts and coverage 4 of 4. If drawing fails, hide the failed chart and retain current semantic information, never a stale graphic. Avoid any WCAG certification or all-users accessibility claim.
Return one complete self-contained HTML file with embedded CSS and JavaScript. Use native labeled controls with type="button" actions, readable text of at least 16px, strong contrast and visible focus. Make the layout responsive at 360px without horizontal scrolling. Keep supplied text literal. Use no remote dependencies or storage, and describe only actions the page actually performs.
Inspect the next chart’s missing data
Use the same check on your own chart: read every category and unit from the HTML before looking at the graphic. Keep the source dataset and accessibility test notes with the maintained file. For a review of the two data snapshots, NOS can render the prepared HTML with its table and supplemental chart together. Ask the reviewer to distinguish Diagrams = 0 from Revisions = Unknown before switching snapshots.