用途:在项目涉及打印样式表、@media print 或纸质打印内容时,按无障碍最佳实践实现与审查打印 CSS。核心立场是打印本身即无障碍功能:认知障碍用户可能更易处理纸质材料,低视力用户可放大,网络不可靠用户需要离线副本。打印 CSS 应作为渐进增强,先写屏幕样式,再叠加 @media print,并在添加自定义样式前确认浏览器默认打印模式下内容仍可理解。
主要能力与规则:严重度分为 Critical(打印完全不可用,如空白页或只剩导航)、Serious(颜色剥离导致内容或含义丢失、表格不可读)、Moderate(孤立标题、未显示链接 URL、跨页布局断裂)、Minor(排版未针对打印优化、缺少长 URL 的二维码替代)。要求所有打印样式限定在 @media print 内;隐藏导航、页脚、广告、cookie 横幅、侧边栏、视频音频 iframe 等非必要元素,提供 .print-hide 与 .print-show 工具类;为仅靠颜色传达的状态添加文字回退(如 .status-error::after 输出 [Error]),并用边框替代色块,必要时用 print-color-adjust: exact;通过 a[href]::after 显示链接 URL,抑制锚点与 javascript: 链接,长 URL 可考虑二维码替代;打印排版使用衬线字体、pt 单位、12pt 基准、设置 orphans/widows;用 @page 定义至少 2cm 页边距,不随意指定 A4;用 break-after/break-inside 控制分页;表格设置 thead { display: table-header-group } 使表头跨页重复;图片用 img 元素加 alt 文本而非 CSS 背景。
使用方式:仅在项目存在打印 CSS 时加载。提供打印按钮(type="button"、含可见文字、打印时隐藏)。测试可用 Chrome/Edge DevTools 的 Emulate CSS media type、Firefox 检查器的打印媒体切换、Ctrl+P 预览,以及灰度测试;自动化可用 axe-core 在打印媒体模拟下扫描,Lighthouse 不直接测试打印样式。
适用场景与限制:适用于含打印样式或打印内容的网页项目。@page 边距框(页眉页脚页码)主要在 Prince、WeasyPrint、Paged.js 等分页渲染器支持,并非所有浏览器;跨浏览器页码需 JavaScript 或服务端 PDF 生成。规则面向 WCAG 2.2 AA,涉及 1.1.1、1.3.1、1.3.2、1.4.1、1.4.3、1.4.6、2.4.4 等准则。权威来源为 mgifford/ACCESSIBILITY.md 中的 examples/PRINT_ACCESSIBILITY_BEST_PRACTICES.md。