html - 可以有一个空的锚标签吗？

Question

我知道如果我想将图像变成可点击的链接，我可以执行以下操作：

<a href="http://twitter.com/username"><img src="icons/twitter.png" /></a>

但我更喜欢使用 CSS 背景图像，这样我就可以有一个悬停状态：

<a class="twitter" href="http://twitter.com/username"></a>

# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}

这很好用，但我不确定拥有一个不包含任何内容的锚链接是否完全有效。Chrome 渲染得很好，FF 也一样，但我不确定其他人是否相同。

我意识到我可以在链接中放一些文本，然后用隐藏它，但由于各种原因text-indent: -9999px，我从不喜欢这种方法。我上面的代码是否跨浏览器兼容？

score 20 · Accepted Answer

这是有效的，但最好是你确实在里面放了一些东西并使用了类似的东西

font-size: 0;

把它藏起来。这样，如果某人没有 CSS（例如屏幕阅读器），他仍然能够大致了解链接的内容。

score 8 · Accepted Answer

这根本不行，因为它违反了基本的可访问性原则。无法为背景图像指定替代文本，就像您可以并且应该使用内容图像alt的标签中的属性来指定它一样。img请参阅 WCAG 2.0指南 1.1。

如果您希望在鼠标悬停时更改图像，可以使用 CSS 和 JavaScript 技术。

score 4 · Accepted Answer

4

这是完全有效的，但如果你愿意，你可以在里面放一个空格：&nbsp;

于 2012-05-08T18:45:53.137 回答

score 2 · Accepted Answer

2

使用作为文本，你很好。

于 2012-05-08T20:02:22.273 回答

score 1 · Accepted Answer

在 Markup.tips，我们最近在 iOS 8 中进行了一些可访问性测试，发现 VoiceOver 不会导航到空链接。至少必须有一个不间断的空间。我们不确定这是否应该被视为 iOS 错误。

5 回答 5