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

Question

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

假设HTML是这样的：

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

CSS就像这样

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

我应该在title="..."代码的alt="..."使用A吗？我的测试使用Lynx浏览器似乎只显示A标签中有文字的标签。

Answer 1

alt仅存在于<img>标记上。如果您的图片实际上是网页的一个有意义的部分，而不仅仅是文体，那么您只需使用具有<img>属性的实际alt标记。

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

之类的内容隐藏它

Answer 2

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

Answer 3

试试这个：

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

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