| name | print |
| description | 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, expand link URLs, and maintain sufficient contrast and font sizing in print styles.
|
Print Accessibility Skill
Canonical source: examples/PRINT_ACCESSIBILITY_BEST_PRACTICES.md in mgifford/ACCESSIBILITY.md
This skill is derived from that file. When in doubt, the example is authoritative.
Apply these rules when implementing or reviewing print stylesheets.
Only load this skill if the project has print CSS in scope.
Core Mandate
Printing is an accessibility feature. Users with cognitive disabilities may
find printed material easier to process; users with low vision may enlarge it;
users without reliable internet need offline copies. Print styles must keep
content useful, readable, and free of colour-only meaning.
Severity Scale (this skill)
| Level | Meaning |
|---|
| Critical | Print output is completely unusable (blank page, navigation only) |
| Serious | Content lost or meaning broken due to colour stripping; tables unreadable |
| Moderate | Orphaned headings; link URLs not revealed; layout breaks across pages |
| Minor | Typography not print-optimised; missing QR alternative to long URLs |
Critical: Scope All Print Styles
@media print {
}
A site with no @media print block at all may print navigation, cookie banners,
and sidebars while omitting content — Critical.
Critical: Hide Non-Essential Elements
@media print {
nav, header nav, footer, aside, .sidebar,
.cookie-banner, .skip-link, .ad, .social-share,
.print-hide, video, audio, iframe,
[role="complementary"],
form button[type="submit"]:not(.print-show) {
display: none !important;
}
}
Utility classes:
.print-hide — elements to suppress in print only.print-show — elements hidden on screen but needed in print (e.g., postal address)
Serious: Colour Dependence in Print
When browsers print with backgrounds off (the default in most browsers), any
information conveyed via background colour is lost. This is Serious for
data tables or status indicators that use colour alone.
@media print {
.status-error::after { content: " [Error]"; }
.status-success::after { content: " [OK]"; }
.status-warning::after { content: " [Warning]"; }
}
For table cells with coloured backgrounds, ensure the cell already contains
a text label — do not rely on background colour to convey meaning.
Force-print backgrounds only when the SVG/image requires it:
@media print {
.required-background {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
Serious: Reveal Link URLs
Printed links are dead without the URL. Missing URL expansion is Serious
for content-heavy pages where links carry information.
@media print {
a[href]::after {
content: " (" attr(href) ")";
font-size: 0.875em;
color: #333;
word-break: break-all;
}
a[href^="#"]::after,
a[href^="javascript:"]::after,
a[href].no-print-url::after {
content: "";
}
}
For pages with many long URLs, consider providing QR codes as an alternative.
A QR code adjacent to key links is printable, scannable, and avoids long URL
wrapping issues:
<img src="/qr/this-page.png"
alt="QR code linking to this page online"
class="print-show">
Moderate: Print Typography
@media print {
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
line-height: 1.5;
color: #000;
background: #fff;
}
h1 { font-size: 22pt; }
h2 { font-size: 18pt; }
h3 { font-size: 14pt; }
p, li, td, th {
font-size: 11pt;
orphans: 3;
widows: 3;
}
}
Use serif typefaces for body text — they are conventionally more readable
in print. Use pt units for font sizes in print stylesheets. Set orphans
and widows to prevent isolated single lines.
Moderate: Page Setup
@page {
margin: 2cm;
}
@page :first {
margin-top: 3cm;
}
Avoid specifying size: A4 unless the document is specifically designed for A4.
US readers use Letter (8.5×11in). Omit size and let the printer/user decide,
or document the choice explicitly.
Moderate: Page Break Control
@media print {
h1, h2, h3 {
page-break-after: avoid;
break-after: avoid;
}
figure, img, table, pre, blockquote {
page-break-inside: avoid;
break-inside: avoid;
}
.page-break-before {
page-break-before: always;
break-before: always;
}
}
Moderate: Tables
@media print {
table { border-collapse: collapse; width: 100%; }
th, td {
border: 1px solid #333;
padding: 4pt;
text-align: left;
}
thead { display: table-header-group; }
tr { page-break-inside: avoid; }
}
thead { display: table-header-group } is the most important table rule for
accessibility — without it, column headers only appear on the first page, making
multi-page tables unreadable. Missing this is Serious for data-heavy tables.
Moderate: Images
@media print {
img {
max-width: 100% !important;
page-break-inside: avoid;
}
img {
background: #fff;
}
}
Definition of Done Checklist
Key WCAG Criteria
- 1.3.1 Info and Relationships (A) — structure preserved in print
- 1.4.1 Use of Color (A) — Serious if colour-only meaning lost when backgrounds stripped
- 1.4.3 Contrast Minimum (AA) — text readable on white paper
- 2.4.4 Link Purpose (AA) — URLs exposed for printed links
References
Standards horizon: These rules target WCAG 2.2 AA. No significant
changes anticipated for print accessibility in WCAG 3.0.
Monitor: https://www.w3.org/TR/wcag-3.0/
