print

Name: print
Author: mgifford

27stars2forks

How to install print?

mgifford/accessibility-skills/print

$npx -y skills add mgifford/accessibility-skills --skill print

Installs into the current project.

Summary

Load this skill whenever the project includes print stylesheets, print media queries (@media print), or any content intended for physical printing. Under no circumstances omit print CSS that ensures readable, accessible printed output. Absolutely always hide decorative elements,

Files · 1

View on GitHub

SKILL.md

1	# Print Accessibility Skill
2
3	> Canonical source: `examples/PRINT_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 implementing or reviewing print stylesheets.
7	Only load this skill if the project has print CSS in scope.
8
9	---
10
11	## Core Mandate
12
13	Printing is an accessibility feature. Users with cognitive disabilities may
14	find printed material easier to process; users with low vision may enlarge it;
15	users without reliable internet need offline copies. Print styles must keep
16	content useful, readable, and free of colour-only meaning. Print CSS should be
17	a progressive enhancement — write screen styles first, then layer `@media print`
18	on top, and confirm the content is still comprehensible in the browser's
19	default print mode before adding custom styles.
20
21	---
22
23	## Severity Scale (this skill)
24
25	\| Level \| Meaning \|
26	\|---\|---\|
27	\| Critical \| Print output is completely unusable (blank page, navigation only) \|
28	\| Serious \| Content lost or meaning broken due to colour stripping; tables unreadable \|
29	\| Moderate \| Orphaned headings; link URLs not revealed; layout breaks across pages \|
30	\| Minor \| Typography not print-optimised; missing QR alternative to long URLs \|
31
32	---
33
34	## Critical: Scope All Print Styles
35
36	```css
37	/* Preferred: single inline block */
38	@media print {
39	/* all print styles here */
40	}
41
42	/* Alternative: separate file */
43	/* <link rel="stylesheet" href="print.css" media="print"> */
44	```
45
46	A site with no `@media print` block at all may print navigation, cookie banners,
47	and sidebars while omitting content — Critical. Prefer the inline approach
48	to keep styles co-located and reduce HTTP requests.
49
50	---
51
52	## Critical: Hide Non-Essential Elements
53
54	```css
55	@media print {
56	nav, header nav, footer, aside, .sidebar,
57	.cookie-banner, .skip-link, .ad, .social-share,
58	.print-hide, video, audio, iframe,
59	[role="complementary"],
60	form button[type="submit"]:not(.print-show) {
61	display: none !important;
62	}
63	}
64	```
65
66	Utility classes:
67	* `.print-hide` — elements to suppress in print only (navigation buttons,
68	interactive controls)
69	* `.print-show` — elements hidden on screen but needed in print (e.g., postal
70	address, expanded content, supplementary notes)
71
72	---
73
74	## Serious: Colour Dependence in Print
75
76	When browsers print with backgrounds off (the default in most browsers), any
77	information conveyed via background colour is lost. This is Serious for
78	data tables or status indicators that use colour alone. Ink colour rendering
79	also varies significantly between printers — always test print output in
80	grayscale mode.
81
82	```css
83	@media print {
84	.status-error::after { content: " [Error]"; }
85	.status-success::after { content: " [OK]"; }
86	.status-warning::after { content: " [Warning]"; }
87
88	/* Remove colour-coded highlights; use borders instead */
89	.status-warning {
90	border: 2pt solid #000;
91	color: #000;
92	background: none;
93	}
94	}
95	```
96
97	For table cells with coloured backgrounds, ensure the cell already contains
98	a text label — do not rely on background colour to convey meaning.
99	Force-print backgrounds only when the SVG/image requires it:
100
101	```css
102	@media print {
103	.required-background {
104	-webkit-print-color-adjust: exact;
105	print-color-adjust: exact;
106	}
107	}
108	```
109
110	Grayscale testing checklist:
111
112	* [ ] All text is legible in black-and-white output
113	* [ ] Charts and graphs include patterns, shapes, or labels in addition to colour
114	* [ ] Status indicators (warnings, errors, successes) use text labels, not colour alone
115	* [ ] Links remain distinguishable (underline or URL disclosure)
116
117	---
118
119	## Serious: Reveal Link URLs
120
121	Printed links are dead without the URL. Missing URL expansion is Serious
122	for content-heavy pages where links carry information.
123
124	```css
125	@media print {
126	a[href]::after {
127	content: " (" attr(href) ")";
128	font-size: 0.875em;
129	color: #333;
130	word-break: break-all;
131	}
132	/* Suppress non-informative and internal links */
133	a[href^="#"]::after,
134	a[href^="javascript:"]::after,
135	a[href].no-print-url::after {
136	content: "";
137	}
138	}
139	```
140
141	For pages with many long URLs, consider providing QR codes as an alternative.
142	A QR code adjacent to key links is printable, scannable, and avoids long URL
143	wrapping issues:
144
145	```html
146	<!-- Print-only QR code linking to the page -->
147	<img src="/qr/this-page.png"
148	alt="QR code linking to this page online"
149	class="print-show">
150	```
151
152	---
153
154	## Moderate: Print Typography
155
156	```css
157	@media print {
158	body {
159	font-family: Georgia, "Times New Roman",

People who liked this also viewed

6 picks

Type

print

27stars2forks

View on GitHub

How to install print?

mgifford/accessibility-skills/print

$npx -y skills add mgifford/accessibility-skills --skill print

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Print Accessibility Skill
2
3	> Canonical source: `examples/PRINT_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 implementing or reviewing print stylesheets.
7	Only load this skill if the project has print CSS in scope.
8
9	---
10
11	## Core Mandate
12
13	Printing is an accessibility feature. Users with cognitive disabilities may
14	find printed material easier to process; users with low vision may enlarge it;
15	users without reliable internet need offline copies. Print styles must keep
16	content useful, readable, and free of colour-only meaning. Print CSS should be
17	a progressive enhancement — write screen styles first, then layer `@media print`
18	on top, and confirm the content is still comprehensible in the browser's
19	default print mode before adding custom styles.
20
21	---
22
23	## Severity Scale (this skill)
24
25	\| Level \| Meaning \|
26	\|---\|---\|
27	\| Critical \| Print output is completely unusable (blank page, navigation only) \|
28	\| Serious \| Content lost or meaning broken due to colour stripping; tables unreadable \|
29	\| Moderate \| Orphaned headings; link URLs not revealed; layout breaks across pages \|
30	\| Minor \| Typography not print-optimised; missing QR alternative to long URLs \|
31
32	---
33
34	## Critical: Scope All Print Styles
35
36	```css
37	/* Preferred: single inline block */
38	@media print {
39	/* all print styles here */
40	}
41
42	/* Alternative: separate file */
43	/* <link rel="stylesheet" href="print.css" media="print"> */
44	```
45
46	A site with no `@media print` block at all may print navigation, cookie banners,
47	and sidebars while omitting content — Critical. Prefer the inline approach
48	to keep styles co-located and reduce HTTP requests.
49
50	---
51
52	## Critical: Hide Non-Essential Elements
53
54	```css
55	@media print {
56	nav, header nav, footer, aside, .sidebar,
57	.cookie-banner, .skip-link, .ad, .social-share,
58	.print-hide, video, audio, iframe,
59	[role="complementary"],
60	form button[type="submit"]:not(.print-show) {
61	display: none !important;
62	}
63	}
64	```
65
66	Utility classes:
67	* `.print-hide` — elements to suppress in print only (navigation buttons,
68	interactive controls)
69	* `.print-show` — elements hidden on screen but needed in print (e.g., postal
70	address, expanded content, supplementary notes)
71
72	---
73
74	## Serious: Colour Dependence in Print
75
76	When browsers print with backgrounds off (the default in most browsers), any
77	information conveyed via background colour is lost. This is Serious for
78	data tables or status indicators that use colour alone. Ink colour rendering
79	also varies significantly between printers — always test print output in
80	grayscale mode.
81
82	```css
83	@media print {
84	.status-error::after { content: " [Error]"; }
85	.status-success::after { content: " [OK]"; }
86	.status-warning::after { content: " [Warning]"; }
87
88	/* Remove colour-coded highlights; use borders instead */
89	.status-warning {
90	border: 2pt solid #000;
91	color: #000;
92	background: none;
93	}
94	}
95	```
96
97	For table cells with coloured backgrounds, ensure the cell already contains
98	a text label — do not rely on background colour to convey meaning.
99	Force-print backgrounds only when the SVG/image requires it:
100
101	```css
102	@media print {
103	.required-background {
104	-webkit-print-color-adjust: exact;
105	print-color-adjust: exact;
106	}
107	}
108	```
109
110	Grayscale testing checklist:
111
112	* [ ] All text is legible in black-and-white output
113	* [ ] Charts and graphs include patterns, shapes, or labels in addition to colour
114	* [ ] Status indicators (warnings, errors, successes) use text labels, not colour alone
115	* [ ] Links remain distinguishable (underline or URL disclosure)
116
117	---
118
119	## Serious: Reveal Link URLs
120
121	Printed links are dead without the URL. Missing URL expansion is Serious
122	for content-heavy pages where links carry information.
123
124	```css
125	@media print {
126	a[href]::after {
127	content: " (" attr(href) ")";
128	font-size: 0.875em;
129	color: #333;
130	word-break: break-all;
131	}
132	/* Suppress non-informative and internal links */
133	a[href^="#"]::after,
134	a[href^="javascript:"]::after,
135	a[href].no-print-url::after {
136	content: "";
137	}
138	}
139	```
140
141	For pages with many long URLs, consider providing QR codes as an alternative.
142	A QR code adjacent to key links is printable, scannable, and avoids long URL
143	wrapping issues:
144
145	```html
146	<!-- Print-only QR code linking to the page -->
147	<img src="/qr/this-page.png"
148	alt="QR code linking to this page online"
149	class="print-show">
150	```
151
152	---
153
154	## Moderate: Print Typography
155
156	```css
157	@media print {
158	body {
159	font-family: Georgia, "Times New Roman",

People who liked this also viewed

6 picks

Type