我想在Web UI中使用图标，同时保留点击链接所能实现的上下文语言，但可能不显示文本和拥挤的UI空间。例如，使用CRUD屏幕，我想显示一个用于添加项目的加号图标，一个用于删除的减号图标，一个用于编辑它的铅笔图标，以及一个用于搜索不同项目的放大镜。有几种方法可以实现这一目标。
在img nchor内渲染a元素。 img alt属性将描述图标代表的内容（alt =“铅笔图标”），title属性将描述预期结果（即“点击此处编辑此小部件”）。
仅渲染a nchor标记，并使用css将图像显示为背景。在这种情况下，锚点的内容应该描述预期的结果，但是it needs to be wrapped in a span element so that its display style can be set to none。锚点还应包含与内容匹配的title属性（当然没有周围的跨度）。
在我看来，选项＃2更容易在asp.net mvc应用程序中实现。由于图标是设计问题而不是标记问题，因此在CSS中定义图像是有意义的。从代码维护的角度来看，它也使事情变得更容易......更改img src位置只需要更改CSS文件而不需要查看文件。删除CSS会导致应用程序回退到全文可访问性。
对我来说有趣的是关于将链接内容嵌套到span中的部分，以便它可以在css中设置disply: none;。另一件事是，如果我使用：悬停选择器交换图像并提供翻转/滚动效果，图像似乎需要更长时间才能换出javascript。
我在这里遗漏了什么吗？
答案 0 :(得分：2)
我们经常使用选项＃2，但是以不同的方式。不是将锚内容包装在一个范围内，而是使用CSS将锚设置为display: block或inline-block，然后将其text-indent设置为-1000em（或类似，只需选择一个很有价值）。我认为您还必须将overflow设置为hidden。
如果您将背景图像作为精灵（包含非悬停和悬停状态的单个图像）并使用:hover重新定位背景，您应该避免使用闪烁/延迟现在看。这也会导致一个较少的单独请求命中您的Web服务器。
请注意，这还需要明确设置CSS中锚点的width和height以匹配您的图标大小。
答案 1 :(得分：1)
如果图标传达的信息不会与文档中已有的信息重复，那么它应该是真实的<img>。
但是，alt属性应该包含图像的替代，而不是它的描述。
alt="Edit this widget"
title属性应该仅用于提供咨询信息（想想“可选附加内容”），您应该避免使用特定于实现的术语（例如“单击此处”）。
对我来说有趣的是关于将链接内容嵌套到跨度中的部分，以便它可以具有显示：无;在css中设置
如果您确实沿着将内容放入背景图像并隐藏真实文本的路线，至少消极text-indent它看不见{而不是{ {1}使它成为屏幕阅读器不可见的。