PDF展示方案中透明文本层搭配同位置图片，能否符合WCAG合规要求？

你的核心问题是opacity: 0导致文本对比度为0，违反了WCAG 2.1 1.4.3（对比度最小）的要求，即使实际能用，技术上仍不符合合规标准。以下是针对你的场景（需保留文本层的屏幕阅读器支持、交互能力，同时视觉上不干扰canvas层）的优化方案：

推荐方案：使用clip-path视觉隐藏文本，同时保持对比度合规 #

clip-path可以将文本裁剪到容器之外，视觉上完全不可见，但元素本身仍保留在原位置，文本的颜色与背景对比度可正常设置，且不影响屏幕阅读器识别和交互事件触发（比如高亮、点击）。

修改后的代码示例：

<div>
    <!-- 通过JS程序渲染PDF文档“图片”，该图片基本为黑白格式。 -->
    <canvas id="image-layer" />

    <!-- 通过clip-path视觉隐藏文本，同时设置符合对比度要求的颜色与背景 -->
    <div id="text-layer" style="clip-path: inset(100%); color: #000; background-color: #fff;">
        <p>various elements containing text here</p>
    </div>
</div>

为什么这个方案合规： #

• 对比度达标：文本颜色#000与背景#fff的对比度为21:1，远高于WCAG要求的普通文本4.5:1标准；
• 视觉隐藏不干扰：inset(100%)将元素内容完全裁剪出可视区域，不会遮挡canvas层；
• 交互与可访问性保留：元素仍处于原布局位置，点击、高亮等交互的触发区域与canvas层对应，屏幕阅读器可正常读取文本内容。

备选方案：利用position将文本移出视口（仅适用于无需精准交互的场景） #

如果你的文本层不需要与canvas层的位置精准绑定交互，可以将文本移到视口外，同样保持对比度合规：

<div>
    <!-- 通过JS程序渲染PDF文档“图片”，该图片基本为黑白格式。 -->
    <canvas id="image-layer" />

    <!-- 移到视口外隐藏文本，保持对比度合规 -->
    <div id="text-layer" style="position: absolute; left: -9999px; top: -9999px; color: #000; background-color: #fff;">
        <p>various elements containing text here</p>
    </div>
</div>

注意：这个方案会让文本层的交互区域脱离canvas层，因此仅适合只需要屏幕阅读器支持、不需要点击/高亮交互的场景。

避坑提醒：不要使用这些方法 #

• 禁止继续使用opacity: 0：会导致文本对比度为0，直接违反WCAG标准；
• 禁止使用display: none：会完全移除元素，屏幕阅读器无法识别；
• 谨慎使用visibility: hidden：虽然元素仍在DOM中，但部分屏幕阅读器可能忽略，且无法触发交互事件。

内容的提问来源于stack exchange，提问作者mikkelrd