html - 在链接中隐藏文本

Question

我有几个关于在 anchor 标记内隐藏文本并只显示背景图像的问题。

注意那些即将用其他文章的链接轰炸我并告诉我这是一个重复问题的人:我已经搜索了这个网站和整个网络并阅读了解决方案(我所说的解决方案主要是黑客)人们来了跟上。大多数人似乎正在做的(或直到最近才做的)是 -9999px hack。同样流行的是/正在将文本包装在一个跨度中并做类似 this 的事情。或 visibility: hidden。

现在，我个人认为“隐藏”文本只有在 动态 隐藏的情况下才真正有意义，即只有在背景图像未加载时才显示(无论出于何种原因原因)。但是，我发现的所有“解决方案”都有效地完全删除了文本，或者至少永久隐藏了它，因此即使没有加载背景图像，文本仍然不会显示。

所以这是我的问题:

1. 为什么人们想要文本然后永久隐藏它？为什么不将 anchor 留空——即不在其中放置任何文本——而只显示图像？为什么要有文本，然后还要费劲地弄清楚如何隐藏它？那有什么意义呢？我在这里遗漏了什么吗？

2. 现在我们有了 CSS3，是否有实际的非 hacky 动态方法来在显示背景图像时隐藏文本，并在图像加载失败时显示文本(无论出于何种原因)？我找不到任何资源，所以我假设这不受支持，但也许你们中的忍者知道得更多？

Answer 1

为什么要这样做有不同的可能性:

1. 搜索引擎扫描网络并收集视觉上隐藏的内容。该网站在语义方面变得更好，并且具有更高的页面排名。

2. 许多视障人士依赖屏幕阅读器朗读给他们听的内容。有时 alt 标签中的文本是不够的。背景图片甚至没有这样的标签。

第二个问题:对我来说，没有已知的方法来检查背景图像是否已成功加载并显示(完全不同的故事!)。 CSS 仅根据定义的规则设置内容样式。可能有一种 javascript 方法可以做到这一点，但在我看来，它不值得付出代价，因为大部分文本并不是真正的后备。如上所述，它具有不同的目的。