在div上使用背景圖片的最佳方式是什麼？

我已經建立了一個使用div的圖像庫，其中包含一個背景圖像，其size設置爲cover，但我擔心可訪問性。在div上使用背景圖片的最佳方式是什麼？

我的問題如下：

我可以用在代替alt-text屬性的div的title屬性上img標籤？
是否會將figcaption元素作爲兄弟元素添加到div，並且嵌套在figure元素中以幫助輔助功能？
我可以在div上使用aria-labeledby嗎？
我是否應該將文字注入div？

非常感謝您對這些問題的深入瞭解！

來源

2016-11-11 Jacob Kelley

你是否在使用背景來覆蓋它？如果是這樣，一個JavaScript解決方案可以接受達到相同的效果？ –

最簡單的方法是讓alt = < img>。這不僅是可訪問圖像的既定做法，而且還滿足可訪問性檢查工具，如來自webaim的wave chrome extension或來自deque的axe。

如果您決定在< div>上使用title =，這是完全可以接受的，並且可以訪問，但是如果您計劃在頁面上運行任何可訪問性工具，則會失敗，因爲該圖像沒有alt標記。您需要在< img>標籤上使用空白alt =''。

來源

2016-11-11 21:06:40 slugolicious

您正在使用div來顯示圖像，那麼您不使用本地元素。

你必須定義一個ARIA role=img來指定，這是一個形象：

爲了與img作用的元素是感知，作者必須提供替代文本或由accessible name calculation確定的標籤。

所以最好的辦法是做：

<div role="img" 
    aria-label="Description of the image" 
    title="Tooltip for users not using assistive technologies" />

需要注意的是，由於屏幕閱讀器並不總是使用title屬性，這是最好使用aria-label。

來源

2016-11-12 11:05:56 Adam

回答您的問題第一，並在最後可能的解決方案：

我可以用在代替alt -text屬性的div的title屬性上img標籤？

不，或者更準確地說，你可以這樣做，但幾乎沒有支持。由於div不具有互動性，也不具有里程碑意義，所以屏幕閱讀器沒有理由將其專注於並找到title。此外，title的屏幕閱讀器支持很差和/或不一致。我建議你看一下名單PowerMapper維持（去年2016年10月更新，截至記者發稿16）：A "click here" link with TITLE attribute

將加入figcaption元素作爲同級的div，並嵌套在一個figure元素幫助可訪問性？

號屏幕閱讀器無可奈何與figcaption（因爲瀏覽器不以任何有意義的方式將其暴露在SR）。

我可以在div上使用aria-labeledby嗎？

號屬性aria-labelledby（兩個「L」 S）是指用於交互式內容或界標或類似的。由於div不具有互動性，也不具有里程碑意義，所以屏幕閱讀器沒有理由將其專注於並找到aria-labelledby。

我是否應該將文本注入到div中？

是的。

Sorta。

考慮離屏技術對圖像的描述，比如這一個：

<div> 
<p class="SRonly"> 
    Cemetery with a lone beam of sunlight shining on a Port-A-John. 
</p> 
</div>

的CSS可能是這樣的（佔RTL語言太）：

.SRonly { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 
    clip: rect(1px, 1px, 1px, 1px); 
    top: auto; 
    left: -9999px; 
    width: 1px; 
    height: 1px; 
    overflow: hidden; 
} 

html[dir=rtl] .SRonly { 
    left: inherit; 
    left: unset; 
    right: -9999px; 
}

這樣「圖像替代」只是流式內容，將隨着屏幕閱讀器通常瀏覽頁面而被讀取。它對於有遠見的用戶是隱藏的。這將有利於使用屏幕閱讀器的低視力用戶。它不會成爲使用屏幕閱讀器的鍵盤用戶的障礙。

沒有ARIA詭計，沒有混淆你的HTML來滿足驗證器，也沒有增加可能降低用戶對可用性的可用性的屬性。

您可能在Bootstrap和其他庫中看到此爲.sr-only。我故意讓我的示例類名稱不同。

現在，所有的說法，我們可以很容易地測試，如果你只是做一個Codepen並鏈接它。

來源

2016-11-15 20:29:15 aardrian

我們不能忘記，很多需要輔助功能的人都不會使用屏幕閱讀器，並且這種替代文本可能會讓那些能夠在沒有完全看到它的情況下感知圖像的人受益。（而不是'clip'屬性被棄用） – Adam

同意和好點。例如，使用Windows高對比度模式（WHCM）的IE中的用戶完全不會看到背景圖像，更不用說隱藏的文本了。但[微軟有WHCM媒體查詢]（http://adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html）可用於解決這個問題。 – aardrian

另一個更近期測試的離屏技術：[CSS Hide-and-Seek]（http://hugogiraudel.com/2016/10/13/css-hide-and-seek/） – aardrian

在div上使用背景圖片的最佳方式是什麼？

回答

相關問題