Question

我想让我的网页高度兼容;因此，当用户在浏览我的网站时关闭所有样式时，我希望他们能够在文本中找到所有内容。问题是我的一些网页使用如下图像按钮：

<a href="next.html"><img src="images/next_button.png"></a>

这是一个问题，因为当我访问带有这样一个按钮的页面时（在没有样式模式下），我得到按钮图像而不是文本链接。在这种情况下，如何用图像链接替换图像按钮？谢谢！

Answer 1

使用alt属性？

<img src="images/next_button.png" alt="next" />

Answer 2

实际上，HTML规范要求您的img标签上有ALT属性，如下所示：

<a href="next.html"><img alt="Next" src="images/next_button.png" /></a>

浏览器（如文本模式浏览器，屏幕阅读器和其他不显示图像的浏览器）会自动将ALT文本替换为图像。

Answer 3

对于您的标记，除了缺少必需的 alt属性外，它在可访问性方面也很好。在任何HTML验证器中运行它会提醒您这一点。

还需要在rel="next"标记中添加a属性，以表明它是指向下一页的关系链接：

<a href="next.html" rel="next"><img src="images/next_button.png" alt="next page"></a>

Answer 4

解决方案是仅使用HTML中的文本并使用css中的图像对其进行样式化：

HTML：

<a href="next.html" class="next-button"><span>Next</span></a>

CSS：

.next-button
{
    display: inline-block;
    width: 100px; /* image width */
    height: 20px; /* image height */
    background: url("../images/next_button.png")
}

.next-button span
{
    display: none;
}

编辑：使用其他范围标记显示背景时隐藏文字

Answer 5

如上所述，正确的alt属性将很容易解决。

我喜欢尽可能使用CSS作为按钮的想法（从而设计实际文本）。如果您正在使用jQuery，请查看jQuery UI的新按钮小部件，它就是这样做的。

您还可以使用图像替换技术，在页面上保留实际文本，然后用图像覆盖文本或通过CSS将文本推到一边。在这两种情况下，实际文本将用于可访问性/ SEO目的，并且图像仅仅是背景图像以使其看起来漂亮。

如何用文本链接替换HTML图像按钮？

5 个答案: