print

打印无障碍技能

规范来源：mgifford/ACCESSIBILITY.md 中的 examples/PRINT_ACCESSIBILITY_BEST_PRACTICES.md 此技能源自该文件。如有疑问，请以示例为准。

实施或审查打印样式表时，请应用以下规则。 仅当项目涉及打印 CSS 时，才加载此技能。

---

核心要求

打印是一项无障碍功能。认知障碍用户可能觉得打印材料更容易理解；低视力用户可以放大材料；无法稳定访问互联网的用户则需要离线副本。打印样式必须确保内容实用、易读，且不依赖颜色来传达含义。打印 CSS 应作为渐进增强——先编写屏幕样式，再叠加 @media print，并在添加自定义样式前，确认内容在浏览器的默认打印模式下仍然易于理解。

---

严重程度等级（此技能）

等级	含义
严重	打印输出完全不可用（空白页面、只有导航）
较高	因颜色被去除而导致内容丢失或含义被破坏；表格难以阅读
中等	孤立标题；未显示链接 URL；页面布局跨页时出现问题
轻微	字体排版未针对打印优化；长 URL 缺少 QR 码替代方案

---

严重：为所有打印样式设定作用范围

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

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

如果网站完全没有 @media print 代码块，打印时可能会显示导航、Cookie 横幅和侧边栏，却省略正文——严重问题。优先采用内联方式，让样式与内容放在一起并减少 HTTP 请求。

---

严重：隐藏非必要元素

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

工具类：

• .print-hide — 仅在打印时隐藏的元素（导航按钮、交互控件）
• .print-show — 屏幕上隐藏但打印时需要显示的元素（例如，邮寄地址、展开的内容、补充说明）

---

较高：避免打印时依赖颜色

浏览器打印时通常会关闭背景图形（大多数浏览器的默认设置），因此，任何通过背景色传达的信息都会丢失。对于仅用颜色区分的数据表或状态指示器，这是较高问题。不同打印机呈现墨色的效果也有很大差异——务必以灰度模式测试打印输出。

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

对于带有彩色背景的表格单元格，请确保单元格中已有文本标签——不要依赖背景色来传达含义。仅当 SVG/图像需要时，才强制打印背景：

@media print {
  .required-background {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

灰度测试清单：

• 所有文本在黑白输出中都清晰可读
• 图表除颜色外还包含图案、形状或标签
• 状态指示器（警告、错误、成功）使用文本标签，而非仅靠颜色区分
• 链接仍可辨识（带下划线或显示 URL）

---

较高：显示链接 URL

如果没有 URL，打印出来的链接就无法访问。对于链接承载重要信息、内容较多的页面，未展开显示 URL 属于较高问题。

@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: "";
  }
}

对于包含许多长 URL 的页面，可考虑提供 QR 码作为替代方案。在关键链接旁放置 QR 码，既便于打印和扫描，也可避免 URL 换行过长的问题：

<img src="/qr/this-page.png"
     alt="QR code linking to this page online"
     class="print-show">

---

中等：打印排版

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

正文使用衬线字体——在印刷品中，这类字体通常更易阅读。打印样式表中的字号使用 pt 单位。设置 orphans 和 widows，避免出现孤立的单行文本。

---

中等：页面设置

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

除非文档专为 A4 纸设计，否则避免指定 size: A4。美国读者使用 Letter 纸（8.5×11in）。省略 size，由打印机或用户决定；或者明确说明选择该纸张尺寸的原因。

可通过 @page 页边距区域添加页眉和页脚：

@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 页边距区域主要受分页媒体渲染器（Prince、WeasyPrint、Paged.js）支持，并非所有浏览器都支持。若要跨浏览器显示页码，请使用 JavaScript 或在服务器端生成 PDF。

---

中等：分页控制

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

同时使用 page-break-*（旧版）和 break-*（现代）属性，以广泛支持各种浏览器。

---

中等：表格

@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 } 是保障表格无障碍访问最重要的规则。没有它，列标题只会出现在第一页，导致跨多页的表格难以阅读。对于数据量大的表格，缺少此规则属于严重问题。

---

中等：图片

@media print {
  img, svg {
    max-width: 100% !important;
    height: auto;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

浏览器通常会默认在打印输出中隐藏 CSS 背景图片。请确保有意义的图片使用带描述性 alt 文本的 <img> 元素，而不是 CSS 背景；不要依赖只在图片损坏时才会显示的 alt 文本。

---

轻微：打印按钮和测试

提供专用的“打印此页”按钮，可让用户更容易发现打印功能：

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

• 使用 type="button"，避免意外提交表单
• 添加可见的按钮文本（不要只用图标），方便屏幕阅读器用户
• 在打印输出中隐藏该按钮（.print-hide）

浏览器测试：

• Chrome/Edge：开发者工具 → 更多工具 → 渲染 →“模拟 CSS 媒体类型” → print
• Firefox：开发者工具 → 检查器 → 切换打印媒体图标
• 使用 Ctrl+P / Cmd+P，在各种纸张尺寸和方向下查看原生打印预览

**自动化测试：**扫描前启用打印媒体模拟，对打印渲染后的 DOM 运行 axe-core。Lighthouse 不会直接测试打印样式，但屏幕版本中的问题也会影响打印输出。

---

完成标准清单

• 所有打印样式都限定在 @media print 中
• 隐藏导航、页脚、广告和交互式小部件
• 颜色编码的状态在打印时有文本替代（.status-error::after 等）
• 通过 ::after 显示链接 URL（屏蔽片段链接和 javascript: 链接）
• 对长 URL：考虑提供二维码替代方案
• 使用衬线正文字体、pt 单位、12pt 基础字号，并设置 orphans / widows
• 定义 @page 边距（至少 2cm）；省略 size 或说明省略原因
• 标题：break-after: avoid
• 图和表格：break-inside: avoid
• 对跨多页的表格设置 thead { display: table-header-group }
• 在灰度模式下测试，确保不依赖颜色也能阅读
• 使用浏览器打印预览进行测试：Chrome、Firefox、Safari

---

WCAG 关键标准

• 1.1.1 非文本内容（A）——背景被隐藏时，图片必须有 alt 文本
• 1.3.1 信息与关系（A）——在打印时保留结构
• 1.3.2 有意义的序列（A）——打印版式与屏幕版式不同时，阅读顺序仍合乎逻辑
• 1.4.1 使用颜色（A）——背景被去除后，若仅靠颜色表达的含义丢失，则属于严重问题
• 1.4.3 对比度最低标准（AA）——确保文本在白纸上清晰可读
• 1.4.6 增强对比度（AAA）——对于常见小字号的打印文档，目标对比度为 7:1
• 2.4.4 链接目的（AA）——显示打印版链接的 URL

---

参考资料

• 完整最佳实践指南
• MDN：@media print
• MDN：print-color-adjust
• MDN：orphans / widows
• CSS 分页媒体模块第 3 级
• Paged.js — 在浏览器中渲染分页内容
• WeasyPrint — 将 HTML/CSS 转换为 PDF，并支持分页媒体

**标准展望：**这些规则以 WCAG 2.2 AA 为目标。预计 WCAG 3.0 不会对打印无障碍访问做出重大调整。 请关注：https://www.w3.org/TR/wcag-3.0/