可访问提交按钮与背景图片

我有一个表单提交按钮，使用它有一个包含'漂亮'风格版本的'价值'文本的背景图像。可访问提交按钮与背景图片

我躲在使用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

可访问提交按钮与背景图片

回答

相关问题