全尺寸背景圖像：<img>可訪問性和打印的回退

在開發具有全尺寸背景圖像的站點時（使用cover屬性）我想在隱藏圖像標記中提供額外的圖像，輔助閱讀器。全尺寸背景圖像：<img>可訪問性和打印的回退

現在，我只是提供一個單獨的打印CSS顯示圖像和覆蓋背景元素。

有沒有可以應用的通用解決方案（可能涉及ARIA標籤）？

~~另外：我不應該關心性能影響，因爲重複使用相同的資源，對吧？~~請參閱：Ressource gets only loaded once

參見：

什麼？（或Chrome中的「背景圖形」或Safari中的「打印背景」或IE中的[可能有選項]） – Kaiido 2014-12-03 12:06:07

儘管對於技術人員來說這是一個很好的選擇，但我懷疑不是每個訪問者都會知道這個偏好據我所知，不久前才推出）。此外 - 打印CSS使用不同的佈局措施，將從常規圖像縮放（例如分頁）中獲益。 – Paracetamol 2014-12-03 12:25:03

對圖像的可訪問性的要求是添加在圖像在文檔中的文本，不添加其他圖像中的文本。你應該做的是添加一個帶有隱藏類和「960乘540」文本的span元素。你也應該改變隱藏類：

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

，使屏幕閱讀器仍然會撿起來約勾選「打印背景圖像」（FF）複選框在打印對話框

2014-12-10 05:55:09 unobf

回答