css - 全尺寸背景图像 : fallback for accessibility and print

Question

在开发具有全尺寸背景图像的网站(使用 cover 属性)时，我想在隐藏的图像标签中提供附加图像，该标 checkout 现在打印品上，可能供无障碍阅读器使用。

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

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

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

参见:

• > Codepen Example

Answer 1

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

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

这样屏幕阅读器仍会拾取它