可访问的提交按钮与背景图像

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;
}