charts-graphs

Name: charts-graphs
Author: mgifford

27stars2forks

How to install charts-graphs?

mgifford/accessibility-skills/charts-graphs

$npx -y skills add mgifford/accessibility-skills --skill charts-graphs

Installs into the current project.

Summary

Load this skill whenever the project contains charts, graphs, data visualizations, infographics, or any visual representation of data (bar charts, line charts, pie charts, scatter plots, dashboards). Under no circumstances render a chart without a text alternative, data table, or

Files · 1

View on GitHub

SKILL.md

1	# Charts and Graphs Accessibility Skill
2
3	> Canonical source: `examples/CHARTS_GRAPHS_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules when creating or reviewing any data visualisation.
7	Only load this skill if the project contains charts or graphs.
8
9	---
10
11	## Core Mandate
12
13	Charts must communicate their information and support their intended tasks
14	without requiring users to perceive a particular colour, inspect a visual
15	position, use a pointer, or understand an unexplained graphic. Accessibility
16	is not one long `alt` label — use a layered presentation: an
17	understandable visual, a concise summary, structured data when needed, and
18	accessible controls for any interaction. The appropriate depth depends on
19	purpose — a single-value sparkline and an exploratory dashboard don't need
20	the same amount of description.
21
22	Start with the user's question before choosing a chart type: what should
23	the chart answer, which comparison/trend/distribution matters, do users need
24	the conclusion, exact values, or exploration? The accessible summary should
25	answer the same question as the visual — don't describe every visual property
26	while omitting the conclusion.
27
28	---
29
30	## Severity Scale (this skill)
31
32	\| Level \| Meaning \|
33	\| --- \| --- \|
34	\| Critical \| Chart conveys essential data with no accessible alternative whatsoever \|
35	\| Serious \| Alternative exists but is incomplete or significantly misleading \|
36	\| Moderate \| Alternative present; colour independence or contrast gaps create friction \|
37	\| Minor \| Best-practice gap; marginal impact on access \|
38
39	---
40
41	## The Layered Information Model
42
43	Provide the layers users need, without duplicating everything into one long
44	accessible name:
45
46	1. Title — identifies the subject
47	2. Context — scope, dates, units, population, filters
48	3. Summary — the main trend, comparison, or finding
49	4. Structured detail — exact values/categories/relationships when needed
50	5. Source and methodology — lets users evaluate and reuse the information
51	6. Interaction feedback — active filters, selections, loading, errors
52
53	Do not put every layer into an image's `alt`, an SVG `<title>`, or one
54	`aria-label` — long accessible names are difficult to review and navigate.
55
56	Choosing a representation:
57
58	\| Need \| Suitable starting point \|
59	\|:---\|:---\|
60	\| One conclusion with few values \| Visible text, possibly a simple static chart \|
61	\| Exact comparison across rows/columns \| HTML data table \|
62	\| Scalable static chart \| SVG, or SVG exported as `<img>` \|
63	\| Dense rendering with many marks \| Canvas + visible HTML summary and data access \|
64	\| User exploration/filtering \| Chart + native HTML controls + structured results \|
65	\| Spatial relationships \| Map/diagram + equivalent locations/relationships in text \|
66
67	SVG is not automatically accessible, and canvas is not automatically
68	inaccessible — the implementation must expose equivalent information
69	regardless of rendering technology. If a table or short paragraph answers the
70	question more clearly than a chart, use the simpler representation.
71
72	---
73
74	## Critical: Every Chart Must Have a Text Alternative
75
76	A chart with no text alternative is Critical — blind users and users with
77	images disabled receive no data at all.
78
79	Simple chart — concise `alt` for one clear takeaway:
80
81	```html
82	<figure>
83	<img src="/assets/charts/quarterly-sales.svg"
84	alt="Sales increased each quarter, from $1.4 million in Q1 to $2.3 million in Q4."
85	width="800" height="450">
86	<figcaption>Quarterly sales for 2025. Values are in Canadian dollars.</figcaption>
87	</figure>
88	```
89
90	Write the alternative for the chart's purpose in context, not a visual
91	inventory. Avoid: "Chart", "Sales chart", a filename, every axis tick, or an
92	interpretation the data doesn't support. If the surrounding article already
93	states the same finding, keep `alt` concise rather than forcing a duplicate
94	announcement.
95
96	Complex chart — short identification + visible long description:
97
98	```html
99	<figure>
100	<img src="/assets/charts/visitors-by-sector.svg"
101	alt="Line chart of accessibility adoption from 2019 to 2024, described below."
102	width="900" height="520">
103	<figcaption>
104	<h2>Accessibility adoption by sector, 2019 to 2024</h2>
105	<p>Adoption increased in all three sectors. Government remained highest,
106	rising from 42% to 78%. Corporate adoption rose from 28% to 61%, with its
107	largest increase in 2021. Non-profit adoption rose from 19% to 47%.</p>
108	<details><summ

People who liked this also viewed

6 picks

Type

charts-graphs

27stars2forks

View on GitHub

How to install charts-graphs?

mgifford/accessibility-skills/charts-graphs

$npx -y skills add mgifford/accessibility-skills --skill charts-graphs

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Charts and Graphs Accessibility Skill
2
3	> Canonical source: `examples/CHARTS_GRAPHS_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md`
4	> This skill is derived from that file. When in doubt, the example is authoritative.
5
6	Apply these rules when creating or reviewing any data visualisation.
7	Only load this skill if the project contains charts or graphs.
8
9	---
10
11	## Core Mandate
12
13	Charts must communicate their information and support their intended tasks
14	without requiring users to perceive a particular colour, inspect a visual
15	position, use a pointer, or understand an unexplained graphic. Accessibility
16	is not one long `alt` label — use a layered presentation: an
17	understandable visual, a concise summary, structured data when needed, and
18	accessible controls for any interaction. The appropriate depth depends on
19	purpose — a single-value sparkline and an exploratory dashboard don't need
20	the same amount of description.
21
22	Start with the user's question before choosing a chart type: what should
23	the chart answer, which comparison/trend/distribution matters, do users need
24	the conclusion, exact values, or exploration? The accessible summary should
25	answer the same question as the visual — don't describe every visual property
26	while omitting the conclusion.
27
28	---
29
30	## Severity Scale (this skill)
31
32	\| Level \| Meaning \|
33	\| --- \| --- \|
34	\| Critical \| Chart conveys essential data with no accessible alternative whatsoever \|
35	\| Serious \| Alternative exists but is incomplete or significantly misleading \|
36	\| Moderate \| Alternative present; colour independence or contrast gaps create friction \|
37	\| Minor \| Best-practice gap; marginal impact on access \|
38
39	---
40
41	## The Layered Information Model
42
43	Provide the layers users need, without duplicating everything into one long
44	accessible name:
45
46	1. Title — identifies the subject
47	2. Context — scope, dates, units, population, filters
48	3. Summary — the main trend, comparison, or finding
49	4. Structured detail — exact values/categories/relationships when needed
50	5. Source and methodology — lets users evaluate and reuse the information
51	6. Interaction feedback — active filters, selections, loading, errors
52
53	Do not put every layer into an image's `alt`, an SVG `<title>`, or one
54	`aria-label` — long accessible names are difficult to review and navigate.
55
56	Choosing a representation:
57
58	\| Need \| Suitable starting point \|
59	\|:---\|:---\|
60	\| One conclusion with few values \| Visible text, possibly a simple static chart \|
61	\| Exact comparison across rows/columns \| HTML data table \|
62	\| Scalable static chart \| SVG, or SVG exported as `<img>` \|
63	\| Dense rendering with many marks \| Canvas + visible HTML summary and data access \|
64	\| User exploration/filtering \| Chart + native HTML controls + structured results \|
65	\| Spatial relationships \| Map/diagram + equivalent locations/relationships in text \|
66
67	SVG is not automatically accessible, and canvas is not automatically
68	inaccessible — the implementation must expose equivalent information
69	regardless of rendering technology. If a table or short paragraph answers the
70	question more clearly than a chart, use the simpler representation.
71
72	---
73
74	## Critical: Every Chart Must Have a Text Alternative
75
76	A chart with no text alternative is Critical — blind users and users with
77	images disabled receive no data at all.
78
79	Simple chart — concise `alt` for one clear takeaway:
80
81	```html
82	<figure>
83	<img src="/assets/charts/quarterly-sales.svg"
84	alt="Sales increased each quarter, from $1.4 million in Q1 to $2.3 million in Q4."
85	width="800" height="450">
86	<figcaption>Quarterly sales for 2025. Values are in Canadian dollars.</figcaption>
87	</figure>
88	```
89
90	Write the alternative for the chart's purpose in context, not a visual
91	inventory. Avoid: "Chart", "Sales chart", a filename, every axis tick, or an
92	interpretation the data doesn't support. If the surrounding article already
93	states the same finding, keep `alt` concise rather than forcing a duplicate
94	announcement.
95
96	Complex chart — short identification + visible long description:
97
98	```html
99	<figure>
100	<img src="/assets/charts/visitors-by-sector.svg"
101	alt="Line chart of accessibility adoption from 2019 to 2024, described below."
102	width="900" height="520">
103	<figcaption>
104	<h2>Accessibility adoption by sector, 2019 to 2024</h2>
105	<p>Adoption increased in all three sectors. Government remained highest,
106	rising from 42% to 78%. Corporate adoption rose from 28% to 61%, with its
107	largest increase in 2021. Non-profit adoption rose from 19% to 47%.</p>
108	<details><summ

People who liked this also viewed

6 picks

Type