1

我最近遇到了这个教程，它使用 CSS 背景图像来显示网页的徽标，而不是使用 HTML 标记。在包含徽标的 div 中有一个占位符文本，为了使该文本消失，作者使用text-indent:-9999px而不是display:hidden因为他说使用后者是不好的做法。

那么，为什么它被认为是不好的做法呢？

4

4 回答 4

4

因为有时屏幕阅读器和搜索引擎会忽略那些出于 SEO 和/或语音目的而位于屏幕外的元素，但不会忽略这些display:none元素。visibility:hidden然而，这两种方法是否是“不好的做法”并不是真正的行业协议，更多的是一种偏好，这取决于作者对这些工具的真正了解以及他们对网站的目标是什么。

还要记住，建议至少有 5 年的历史，而且事情会随着时间而变化，所以当时的“最佳实践”现在并不自动成为最佳实践。

所以，找出你想要达到的目标，然后考虑你的选择，这在我看来是“最佳实践”。

于 2013-09-23T05:33:19.430 回答
2

主要是因为屏幕阅读器不会阅读隐藏的内容，但许多人会阅读位于屏幕外但仍然可见的内容。

于 2013-09-23T05:30:08.757 回答
2

首先，没有什么叫做display: hidden;，无论是 itsdisplay: none;还是 it's visibility: hidden;oroverflow: hidden;并提出您的问题，我不喜欢使用它，而是使用一个img标签，其alt属性将描述我的图像，是的，屏幕阅读器请阅读ALT文本，如果你alt你的标签上没有img，它会简单地忽略它..

例如，如果我使用img我的标志，那么我将使用类似的东西

<img src="#" alt="Company Name Logo" title="Company Name" />
于 2013-09-23T05:33:16.553 回答
2

为徽标使用背景图像意味着您可以将徽标文本放置在同一元素中。

原因之一是无障碍阅读器（针对视障者）在看不到徽标时会阅读徽标文本。但是，您不希望徽标上方的文本，因此您可以通过文本缩进来隐藏它。

display:none 中的内容不读取元素。

我不是 100% 确定这一点，但我还记得读过一些搜索引擎会忽略隐藏元素中的内容。然而，他们可能会索引缩进的内容，但这需要验证。

于 2013-09-23T05:35:26.733 回答