打印可访问性核心是信息完整传递：保留标题层级、强制黑白配色、显示链接URL、提供图片alt文本，确保OCR识别与纸质阅读无障碍。
打印样式本身不直接参与屏幕阅读器交互，但“可访问性”在打印场景中真实存在：它体现在内容是否被完整、准确、无歧义地传递到纸面——尤其是对低视力、色觉障碍、认知障碍用户，或依赖纸质材料辅助阅读的人群。优化核心不是加ARIA，而是确保打印输出的信息结构清晰、语义不丢失、关键元素可识别。
为什么 @media print 里不能删 <main></main> 和标题层级
很多开发者在 @media print 中粗暴 display: none 所有非内容区，连 <main></main> 外的 <header></header> 或 <footer></footer> 都一并干掉，结果导致：打印页首缺失页面标题、无发布日期、无来源标识；更严重的是，当用户用扫描仪+OCR再转为语音时，缺失 <h1></h1>–<h3></h3> 层级会让文本变成一段无结构的长句，屏幕阅读器无法按语义跳读。
实操建议：
- 保留
<main></main>及其直接子元素（如<article></article>、<section></section>），仅隐藏导航、广告、评论等真正无关模块 - 确保每个
<section></section>至少含一个<h2></h2>或更高阶标题，避免纯<div> 套内容 <li>若原页用 <code><h2></h2>表示章节、<h3></h3>表示小节，打印样式中不要重置为font-size: 100%导致视觉层级消失 - 在
@media print中强制重置：color: #000 !important;和background-color: #fff !important; - 禁用所有
text-shadow、box-shadow、渐变背景，它们在打印中无效且干扰墨水分布 - 图标类
<span class="icon-print"></span>若靠字体图标实现，必须提供替代文本（如aria-label）或替换为可见文字，否则纸上只剩空白方块 - 用
::after伪元素补 URL：a[href]:not([href^="mailto:"]):not([href^="tel:"])::after { content: " (" attr(href) ")"; font-size: 10pt; } - 对
<blockquote></blockquote>、<pre class="brush:php;toolbar:false;"></pre>、长表格等，加page-break-inside: avoid;，防止关键上下文被硬切开 - 慎用
position: fixed或position: absolute的页眉页脚——它们在多数浏览器打印中会被忽略或错位 - 所有非装饰性
<img alt="HTML打印样式可访问性怎么优化？无障碍打印排版" >必须含alt，且内容具体、不含冗余词（如“图片：”、“图标：”） - 复杂图表优先用
<figure></figure>+<figcaption></figcaption>，其中<figcaption></figcaption>会在打印中自然呈现为图注 - 避免
alt=""用于含信息的图片——它告诉所有工具“此处无内容”，等于主动抹除信息
color 和 background-color 必须显式声明为黑白
浏览器默认打印会忽略背景色，但部分 CSS 框架（如 Bootstrap）或自定义主题设置了 background-color: #f8f9fa 和浅灰文字，打印时可能变成“白底灰字”，肉眼难辨，OCR 也易识别失败。这不是 bug，是设计疏忽。
立即学习“前端免费学习笔记（深入）”；
实操建议：
链接和引用必须显示 URL，且避免分页截断
纯文字“点击此处”在纸上毫无意义；而长 URL 被自动折行或卡在页尾/页眉，会导致用户无法完整抄录。这不是排版问题，是信息可达性断裂。
实操建议：
<img alt="HTML打印样式可访问性怎么优化？无障碍打印排版" > 的 alt 文本在打印中真有用
有人觉得“打印图片就完了，alt 是给屏幕阅读器看的”。错。当图片因网络缺失、格式不支持或用户主动关闭图片加载时，alt 就是唯一内容载体；而 OCR 工具扫描纸质文档后，也会把 alt 当作文本提取——尤其对流程图、数据截图、签名栏等，alt 写成“图：2025年Q3销售额柱状图，红色柱代表华东区，同比增长12%”比“chart.png”有用十倍。
实操建议：
最易被忽略的一点：打印样式不是“视觉降级”，而是“信息提纯”。删掉什么、留下什么、如何重组，背后全是用户真实使用场景的判断——比如医生打印病历摘要时需要时间戳和签名栏，律师打印合同条款时依赖编号层级和加粗关键词，这些都不能靠“统一清空再重写CSS”来解决。
