隱藏文字背景圖片對可訪問性不好？

我需要顯示文本的圖像，而不是我的菜單的實際文字。隱藏文字背景圖片對可訪問性不好？

我在每個菜單鏈接中放置了一個跨度。這些跨度具有設置的高度和寬度，設置爲顯示塊，文本爲負縮進以隱藏，背景圖像設置爲我想要使用的圖像。

<li> 
    <a href="site.com/page1"> 
    <span id="menu1"> 
     Link Text 
    </span> 
    </a> 
</li>

這是工作良好的跨瀏覽器。當我放大和縮小頁面時，它也可以正常工作。是否有任何不明顯的可訪問性問題，例如屏幕閱讀器？

感謝

2012-04-04 Evans

屏幕閱讀器：這將是罰款與他們的用戶（盲人和一些弱視的人），因爲文字是關閉的視口，但沒有隱藏與display: none;或visibility: hidden;所以它仍然讀。

High contrast mode：在Windows上，此模式隱藏背景圖像並使用自定義顏色來顯示內容。 CSS仍處於激活狀態，因此文字在視覺上隱藏起來，但背景圖像消失了：您的菜單對於許多視力不佳的用戶而言已消失。

由於某種原因，無論選擇與否，圖像未加載：只要CSS仍處於活動狀態，與高對比度模式相同的問題。

編輯：許多技術描述加上贊成和反對克里斯Coyer解釋在這裏：http://css-tricks.com/css-image-replacement/。
雖然最方便的一種是當你真的想使用HTML是用圖像ALT什麼 :)

2012-04-04 15:27:34 FelipeAls

+1沒有錯''，我認爲大部分的SEO知識堅持認爲圖像替換優於普通舊'alt'對SEO來說似乎是好事。 – steveax 2012-04-04 16:24:05

是的，作爲一個css background不會被屏幕閱讀器閱讀，而且，它是壞的搜索引擎優化。你可以做的是，那裏使用的文本，然後將其隱藏要麼：

text-indent, opacity:0

!!!我不知道這是否是considerd黑帽SEO作爲你只是寫東西這就是已經在那裏！

2012-04-04 11:04:59 Ray

不要緊，背景圖像不會被屏幕閱讀器讀取不使用背景圖片？真正的文本仍然存在。我使用文本縮進來隱藏它而不僅僅是不顯示任何內容的原因是我聽到屏幕閱讀器可能會忽略隱藏的元素。謝謝 – Evans 2012-04-04 11:07:17

雖然你說過要使用文字圖像而不是實際文字，但我假設沒有「真實」文字。 - >不會被Google或屏幕閱讀器看到。 Menuitem - >將會被看到。如何使用跨度之間的文本播放CSS將不會影響屏幕閱讀器。 – Ray 2012-04-04 11:16:34

對不起，已更新我的答案，使其更清晰。所以屏幕閱讀器仍然看到文本顯示爲無？謝謝 – Evans 2012-04-04 11:36:05

回答