html - 带有背景图像的可访问提交按钮

Question

我有一个表单提交按钮，使用它有一个包含“值”文本的“漂亮”样式版本的背景图像。

我使用以下方法隐藏 html 值文本:

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

但是，在关闭图像(用于可访问性测试)的情况下，显然没有显示按钮文本。

删除上面的内容会恢复值文本，但它会覆盖在图像之上。

如何在值文本的顶部设置背景图像？

首先猜测是 <button><span></span></button> 的某种组合？

Answer 1

如何在按钮内使用 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;
}