用背景图像标记链接的正确方法是什么？答案

【问题标题】：What is the proper way to label a link with a background image?用背景图像标记链接的正确方法是什么？
【发布时间】：2011-04-16 12:03:38
【问题描述】：

如果我在锚标记中使用背景图像作为菜单，为屏幕阅读器和 SEO 提供等效文本标签的最佳方式是什么？

假设 HTML 是这样的：

<h2><a class='menuItem1'></a></h2>

CSS 是这样的

.menuItem1 {
    display:block;
    width:100px;
    height:25px;
    background-image:url(../Images.menuitem1.png);
}

我是否应该在A 标签上的alt="..." 上也使用title="..."？我使用 Lynx 浏览器的测试似乎只在 A 标记中也有文本时才显示标签。

【问题讨论】：

标签： html

【解决方案1】：

alt 仅存在于 <img> 标记上。如果您的图片实际上是网页的一个有意义的部分，而不仅仅是风格，那么您可以使用带有 alt 属性的实际 <img> 标签。

或者，您可以将实际文本放在 <a> 标记内，并使用 CSS 将其隐藏。由于display: none 也会对屏幕阅读器隐藏它，因此您需要使用text-indent:-9999px; 之类的东西来隐藏它

【讨论】：

【解决方案2】：

alt 属性在 a 标记上不存在。因此，您应该使用title。或者，您可以使用img 标记创建一个实际图像并为此设置alt 属性。

【讨论】：

【解决方案3】：

试试这个：

<h2><a class='menuItem1'>Text to be only seen by screen readers</a></h2>

.menuItem1 {
  text-indent:-9999px;
}

【讨论】：