全尺寸背景图片：可访问性和打印的<img/>后备

Question

在开发具有全尺寸背景图像的网站（使用cover属性）时，我想在隐藏图像标记中提供附加图像，该标记出现在打印上，也可能用于辅助功能读者。

现在，我只提供一个单独的打印CSS，显示图像并覆盖背景元素。

是否有可以应用的通用解决方案（可能涉及ARIA标签）？

另外：我不应该关心性能影响，因为重复使用相同的资源，对吧？请参阅：Ressource gets only loaded once

请参阅：

• Codepen Example

Answer 1

图像的可访问性要求是在文档中的TEXT中添加图像中的文本，而不是添加其他图像。你应该做的是添加一个带有隐藏类的span元素和一个＆＃34; 960 by 540＆＃34;的文本。您还应该将隐藏的类更改为：

.hidden {
    position: absolute !important;
    height: 1px; width: 1px; 
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

这样屏幕阅读器仍然可以选择它