可訪問提交按鈕與背景圖片

我有一個表單提交按鈕，使用它有一個包含'漂亮'風格版本的'價值'文本的背景圖像。可訪問提交按鈕與背景圖片

我躲在使用HTML文本值：

text-indent: -9000px; 
font-size: 0;

然而，圖像關閉（可訪問性測試）顯然是有不顯示按鈕上的文字。

刪除以上內容會將值文本返回，但會覆蓋圖像頂部。

如何在值文本上添加背景圖片？

第一個猜測是<button><span></span></button>的某種組合？

來源

2010-12-06 Jon Hadley

什麼用的情況下沒有圖像？屏幕閱讀器？如果是這種情況，那麼文本縮進的文本仍然會被讀取。 – Erik 2010-12-06 11:20:06

嗯。如果您擔心無障礙，您確定這是首選的正確途徑嗎？不會將說明文字置於按鈕之外更容易？ – 2010-12-06 11:20:51

@Pekka，對不起，問題並不完全清楚 - 它不是解釋性文本，它的值會顯示其他文本 - 改變了問題以反映。 – 2010-12-06 11:50:37

怎麼樣使用一個img標籤上的按鈕內，並給予該alt屬性：

HTML：

<button class="button"> 
<img src="http://www.google.nl/logos/2010/stnicday10-infstant.jpg" alt="google"/> 
</button>

CSS：

.button { 
    background: transparent; 
    border: 1px solid Black; 
}

來源

2010-12-06 12:14:41 Bazzz

-2

設置按鈕的值空：

<input type="submit" value="" />

，你可以從你的CSS刪除text-indent。

這顯然不會顯示任何文字，但是當您禁用CSS背景時，該按鈕仍然可見。

來源

2010-12-06 11:41:30 mingos

你可以做這樣的事情：<button>Your BTN Text<span class="img"> </span></button>

和CSS：

button { position: relative;} 
button span { 
    position: absolute; 
    text-indent: -9000px; 
    top:0; 
    left: 0; 
    right:0; 
    bottom:0; 
    background: url(yourimage.whatever); 
}

所以如果我們禁用文本仍然是絕對的元素下可見的圖像。

來源

2010-12-06 11:57:28 meo

讓儘可能value=""（空）：

<input type='submit' name="csubmit" value="" />

如果您有多個提交按鈕和基於按鈕點擊確認離開值空空間：

<input type-"submit" name="csubmit1" value=" " /> 
<input type-"submit" name="csubmit2" value=" " /> 
<input type-"submit" name="csubmit3" value=" " />

來源

2014-02-19 04:16:04 BGB73

可訪問提交按鈕與背景圖片

回答

相關問題