应该将链接图标呈现为图像还是使用 css 背景图像 url？

Question

我想在 Web UI 中使用图标，同时保留单击链接将实现的上下文语言，但可能不显示文本和拥挤的 UI 空间。例如，使用 CRUD 屏幕，我想显示一个用于添加项目的加号图标，一个用于删除它的减号图标，一个用于编辑它的铅笔图标，以及一个用于搜索不同项目的放大镜。有几种方法可以实现这一点。

1. 在anchor 内渲染一个img 元素。 img alt 属性将描述图标所代表的内容（alt="pencil icon"），而 title 属性将描述预期结果（即“单击此处编辑此小部件”）。

2. 仅渲染anchor 标签，并使用css 将图像显示为背景。在这种情况下，锚的内容应该描述预期的结果，但是it needs to be wrapped in a span element so that its display style can be set to none。锚点还应该包含与内容匹配的标题属性（当然没有周围的跨度）。

在我看来，选项 #2 更容易在 asp.net mvc 应用程序中实现。由于图标是设计问题而不是标记问题，因此在 CSS 中定义图像是有意义的。从代码维护的角度来看，它也使事情变得更容易......更改 img src 位置只需要更改 CSS 文件，而不需要更改视图文件。删除 CSS 也会导致应用程序回退到全文可访问性。

让我闻起来很有趣的是关于将链接内容嵌套到跨度中的部分，以便它可以在 css 中设置disply: none;。另一件事是，如果我使用 :hover 选择器来交换图像并提供翻转/滚动效果，则图像的交换时间似乎比使用 javascript 时要长。

我错过了什么吗？

Answer 1

我们经常使用选项 #2，但方式不同。不要将锚内容包装在跨度中，而是使用 CSS 将锚设置为 display: block 或 inline-block，然后将其 text-indent 设置为 -1000em（或类似，只需选择一个大值）。我认为您还必须将overflow 设置为hidden。

如果您将背景图像作为精灵（其中包含非悬停和悬停状态的单个图像）并使用:hover 重新定位背景，您应该避免您可能会看到的闪烁/延迟现在。这也会减少一个单独的请求访问您的 Web 服务器。

请注意，这还需要在 CSS 中明确设置锚点的 width 和 height 以匹配您的图标大小。

Answer 2

如果图标传达的信息不重复文档中已有的信息，那么它应该是一个真实的<img>。

但是，alt 属性应该包含图像的替代项，而不是对其的描述。

alt="Edit this widget"

title 属性应该只用于提供咨询信息（想想“可选的附加功能”），并且您应该避免使用特定于实现的术语（例如“单击此处”）。

让我觉得很有趣的是关于将链接内容嵌套到一个跨度中以便它可以显示的部分：无；在css中设置

如果您确实采取了将 content 放在 背景 图像中并隐藏真实文本的路线，那么至少是负面的text-indent 它看不见而不是display: none并使其对屏幕阅读器不可见。