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. Print CSS should be a progressive enhancement — write screen styles first, then layer @media print on top, and confirm the content is still comprehensible in the browser's default print mode before adding custom styles.

Severity Scale (this skill)

Critical: Scope All Print Styles

/* Preferred: single inline block */
@media print {
  /* all print styles here */
}

/* Alternative: separate file */
/* <link rel="stylesheet" href="print.css" media="print"> */

A site with no @media print block at all may print navigation, cookie banners, and sidebars while omitting content — Critical. Prefer the inline approach to keep styles co-located and reduce HTTP requests.

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 (navigation buttons,

interactive controls)

• .print-show — elements hidden on screen but needed in print (e.g., postal

address, expanded content, supplementary notes)

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. Ink colour rendering also varies significantly between printers — always test print output in grayscale mode.

@media print {
  .status-error::after   { content: " [Error]"; }
  .status-success::after { content: " [OK]"; }
  .status-warning::after { content: " [Warning]"; }

  /* Remove colour-coded highlights; use borders instead */
  .status-warning {
    border: 2pt solid #000;
    color: #000;
    background: none;
  }
}

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;
  }
}

Grayscale testing checklist:

• [ ] All text is legible in black-and-white output
• [ ] Charts and graphs include patterns, shapes, or labels in addition to colour
• [ ] Status indicators (warnings, errors, successes) use text labels, not colour alone
• [ ] Links remain distinguishable (underline or URL disclosure)

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;
  }
  /* Suppress non-informative and internal links */
  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:

<!-- Print-only QR code linking to the page -->
<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; /* Minimum lines at bottom of page */
    widows: 3;  /* Minimum lines at top of next page */
  }
  blockquote {
    border-left: 3pt solid #555;
    padding-left: 12pt;
    margin-left: 0;
    font-style: italic;
  }
}

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; /* Minimum for most printers; leave more for bound documents */
}
@page :first {
  margin-top: 3cm;
}
@page :left  { margin-left: 3cm; }
@page :right { margin-right: 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.

Running headers/footers can be added via @page margin boxes:

@page {
  @top-center {
    content: "Document Title — " string(doc-title);
    font-size: 9pt;
    color: #555;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 9pt;
    color: #555;
  }
}

@page margin boxes are primarily supported in paged-media renderers (Prince, WeasyPrint, Paged.js), not all browsers. For cross-browser page numbers, use JavaScript or server-side PDF generation.

Moderate: Page Break Control

@media print {
  h1, h2, h3 {
    page-break-after: avoid;
    break-after: avoid;   /* Modern equivalent */
  }
  figure, img, table, pre, blockquote {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .page-break-before {
    page-break-before: always;
    break-before: always;
  }
}

Use both page-break-* (legacy) and break-* (modern) properties for broad browser support.

Moderate: Tables

@media print {
  table { border-collapse: collapse; width: 100%; }
  th, td {
    border: 1pt solid #333;
    padding: 6pt;
    text-align: left;
  }
  thead { display: table-header-group; } /* Repeat header on each page */
  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, svg {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

Browsers typically suppress CSS background images in print output by default. Ensure meaningful images use <img> elements with descriptive alt text rather than CSS backgrounds — do not rely on alt text appearing only for broken images.

Minor: Print Button and Testing

Offering a dedicated "Print this page" button improves discoverability:

<button type="button" class="print-trigger print-hide" onclick="window.print()">
  Print this page
</button>

• Use type="button" to prevent accidental form submission
• Include visible button text (not icon-only) for screen reader users
• Hide the button in print output itself (.print-hide)

Browser testing:

• Chrome/Edge: DevTools → More tools → Rendering → "Emulate CSS media type" → print
• Firefox: DevTools → Inspector → toggle the print media icon
• Ctrl+P / Cmd+P for native print preview across paper sizes and orientations

Automated testing: run axe-core against the print-rendered DOM by activating print media emulation before scanning. Lighthouse does not directly test print styles, but screen-version violations also affect print output.

Definition of Done Checklist

• [ ] All print styles scoped in @media print
• [ ] Nav, footer, ads, interactive widgets hidden
• [ ] Colour-coded states have text fallbacks in print (.status-error::after etc.)
• [ ] Link URLs revealed via ::after (fragment and javascript: links suppressed)
• [ ] Long URLs: QR code alternative considered
• [ ] Serif body font, pt units, 12pt base size, orphans/widows set
• [ ] @page margins defined (at least 2cm); size omitted or documented
• [ ] Headings: break-after: avoid
• [ ] Figures and tables: break-inside: avoid
• [ ] thead { display: table-header-group } for multi-page tables
• [ ] Tested in grayscale for colour-independent readability
• [ ] Tested using browser Print Preview: Chrome, Firefox, Safari

Key WCAG Criteria

• 1.1.1 Non-text Content (A) — images must have alt text when backgrounds are suppressed
• 1.3.1 Info and Relationships (A) — structure preserved in print
• 1.3.2 Meaningful Sequence (A) — reading order logical when print layout differs from screen
• 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
• 1.4.6 Contrast Enhanced (AAA) — target 7:1 for printed documents where fine text is common
• 2.4.4 Link Purpose (AA) — URLs exposed for printed links

References

• Full best practices guide
• MDN: @media print
• MDN: print-color-adjust
• MDN: orphans / widows
• CSS Paged Media Module Level 3
• Paged.js — paged content rendering in the browser
• WeasyPrint — HTML/CSS to PDF with Paged Media support

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/>