我們如何使 CSS 背景圖像可供螢幕閱讀器存取？

為CSS 背景圖像提供替代文字

雖然CSS 背景圖像可以傳達有價值的訊息，但它們通常缺乏一種可供螢幕閱讀器或有視覺障礙的使用者可以理解其內容。這就提出了一個問題：我們如何在不犧牲視覺體驗的情況下為背景圖像提供替代文字？

答案在於利用包含元素上的 title 屬性。透過為顯示背景圖像的元素分配描述性標題，我們可以傳達其目的並為螢幕閱讀器提供可存取的替代方案。

範例：

HTML：

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS:

.hotwire-fitness {
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

在此範例中， div 元素分配了帶有文字“Fitness Centre”的title 屬性。當螢幕閱讀器遇到此元素時，它會讀出標題，讓使用者了解圖示的用途。

**

以上是我們如何使 CSS 背景圖像可供螢幕閱讀器存取？的詳細內容。更多資訊請關注PHP中文網其他相關文章！