用背景圖片標註鏈接的正確方法是什麼？

Question

如果我在錨標籤中使用背景圖像作爲菜單，爲屏幕閱讀器和搜索引擎優化提供相當於文本標籤的最佳方式是什麼？

假設HTML是這樣的：

<h2><a class='menuItem1'></a></h2> 

而CSS是這樣

.menuItem1 { 
    display:block; 
    width:100px; 
    height:25px; 
    background-image:url(../Images.menuitem1.png); 
} 

我應該在A標籤使用title="..."以及在alt="..."？如果A標籤中有文字，我使用Lynx瀏覽器的測試似乎只顯示一個標籤。

Answer 1

alt只存在於<img>標記中。如果您的圖像實際上是網頁的有意義的部分，而不僅僅是風格，那麼您可以使用具有alt屬性的實際<img>標記。

或者，您可以將實際文本放在<a>標記中，並使用CSS隱藏它。由於display: none也將從屏幕閱讀器隱藏它，你需要的東西，如text-indent:-9999px;

Answer 2

的alt屬性不上a標籤存在，而不是隱藏它。因此，您應該使用title。或者，您可以使用img標記創建實際圖像，併爲其設置alt屬性。

Answer 3

試試這個：

<h2><a class='menuItem1'>Text to be only seen by screen readers</a></h2> 

.menuItem1 { 
    text-indent:-9999px; 
}