链接图标应该呈现为图像还是带有 css 背景图像 url？
我想在 Web UI 中使用图标，同时保留单击链接将实现的上下文语言，但可能不显示文本并拥挤 UI 空间。例如，使用 CRUD 屏幕，我想显示用于添加项目的加号图标、用于删除项目的减号图标、用于编辑项目的铅笔图标以及用于搜索不同项目的放大镜。有几种方法可以实现这一目标。
在
anchor 内渲染一个img元素。img alt属性将描述图标代表的内容（alt="铅笔图标"），而 title 属性将描述预期结果（即“单击此处编辑此小部件”）。仅渲染一个
anchor标签，并使用css将图像显示为背景。在这种情况下，锚点的内容应该描述预期的结果，但是 它需要包裹在 span 元素中，以便其显示样式可以设置为 none。锚点还应该包含与内容匹配的标题属性（当然没有周围的范围）。
在我看来，选项 #2 在 ASP.NET MVC 应用程序中更容易实现。由于图标是设计问题而不是标记问题，因此在 CSS 中定义图像是有意义的。从代码维护的角度来看，它也使事情变得更容易......更改 img src 位置只需要更改 CSS 文件，而不需要更改视图文件。删除 CSS 也会导致应用程序回退到全文可访问性。
对我来说，有趣的是关于将链接内容嵌套到跨度中的部分，以便它可以在 css 中设置 disply: none; 。另一件事是，如果我使用 :hover 选择器来交换图像并提供翻转/滚动效果，则图像的交换时间似乎比使用 javascript 时要长。
我在这里错过了什么吗？
I want to use iconography in a web UI, while retaining the context language of what clicking on the link will achieve, but possibly not displaying the text and crowding UI space. For example using CRUD screens, I want to display a plus icon for adding an item, a minus icon for deleting, it, a pencil icon for editing it, and a magnifying glass to search for a different item. There are a couple of ways to achieve this.
Render an
imgelement inside of theanchor. Theimg altattribute will describe what the icon represents (alt="pencil icon"), and the title attribute will describe the intended consequence (i.e. "Click here to edit this widget").Render an
anchor tag only, and use css to display the image as a background. In this case, the anchor's content should describe the intended consequence, however it needs to be wrapped in a span element so that its display style can be set to none. The anchor should also contain a title attribute matching the content (without a surrounding span of course).
It seems to me like option #2 is easier to implement in an asp.net mvc app. Since the icon is a design concern and not a markup concern, it makes sense to define the image in CSS. It also makes things easier from a code maintenance perspective... changing the img src location would only necessitate changes in the CSS file and no view files. Removing the CSS would cause the application to fall back to full text accessibility too.
What smells funny to me is the part about nesting the link content into a span so that it can have disply: none; set in the css. Another thing is, if I use the :hover selector to swap the image and provide a rollover / rollout effect, the images seem to take longer to swap out than when done with javascript.
Am I missing anything here?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我们经常使用选项#2，但方式不同。不要将锚点内容包装在跨度中，而是使用 CSS 将锚点样式设置为
display: block或inline-block，然后设置其text-indentcode> 到-1000em（或类似的，只需选择一个大的值）。我认为您还必须将overflow设置为hidden。如果您将背景图像作为精灵（其中包含非悬停和悬停状态的单个图像）并使用
:hover重新定位背景，您应该避免闪烁/延迟现在可能正在看到。这也会导致更少的一个单独的请求到达您的网络服务器。请注意，这还需要在 CSS 中显式设置锚点的宽度和高度以匹配图标大小。
We frequently use option #2, but in a different fashion. Instead of wrapping the anchor content in a span, use CSS to style the anchor as
display: blockorinline-block, then set itstext-indentto-1000em(or similar, just pick a big value). I think you also have to setoverflowtohidden.If you do the background image as a sprite (a single image with both the non-hover and hover states in it) and use
:hoverto reposition the background, you should avoid the flicker/delay that you might be seeing now. That also results in one less separate request hitting your web server.Note that this also requires explicitly setting the
widthandheightof the anchor in your CSS to match your icon size.如果图标传达的信息不重复文档中已有的信息，那么它应该是真正的
![]()
但是，alt 属性应包含图像的替代项，而不是图像的描述。
title 属性应该仅用于提供咨询信息（认为“可选附加内容”），并且您应该避免使用特定于实现的术语（例如“单击此处”）。
如果您确实将内容放入背景图像中并隐藏真实文本，至少要负
文本缩进在视线之外，而不是display: none使其对屏幕阅读器不可见。If the icon conveys information that does not duplicate information already in the document, then it should be a real
<img>.However, the alt attribute should contain an alternative to the image, not a description of it.
The title attribute should only be used to provide advisory information (think "optional extras") and you should avoid using implementation specific terminology (such as "Click here").
If you do go down the route of putting content in background images and hiding real text, at least negative
text-indentit out of sight instead ofdisplay: noneing it and making it invisible to screen readers.