全尺寸背景图像： <img> 辅助功能和打印的后备

Question

在开发具有全尺寸背景图像的网站（使用 cover 属性）时，我想在隐藏的图像标签中提供一个额外的图像，该图像标签出现在印刷品上，也许是供辅助功能读者使用。

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

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

另外：我不应该关心性能影响，因为相同的资源是重用的，对吧？请参阅：资源仅加载一次

看：

• 代码笔示例

Answer 1

图像的辅助功能要求是在文档中的 TEXT 中添加图像中的文本，而不是添加其他图像。你应该做的是添加一个带有隐藏类的span元素和一个文本"960 x 540"。您还应该将隐藏类更改为：

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

这样屏幕阅读器仍然会拿起它