假设我想用精美的图像箭头替换链接>。为此，我想使用CSS精灵。
在许多文章中，例如在Smashing Magazine的最近（2012）文章中，推荐的方法是这样的：
HTML：
<a href="/article/123" class="nextLink">></a>
CSS：隐藏文字并将精灵指定为背景
但是这种方法在可访问性方面存在问题：如果禁用图像但解释了CSS，则上述链接将不可见。
有趣的是，我发现 old （2010）article by Paciello Group提出了一个好的解决方案。我们的想法是在要替换的文本旁边放置一个<span>。 <span>有一张背景图片，位于文字的顶部。如果图像加载，它将替换文本，否则文本仍然可见。
为什么这种方法没有被广泛使用？这个解决方案有问题吗？
答案 0 :(得分：5)
主要的缺点是在加载CSS精灵之前向没有特殊辅助功能需求的用户显示文本。在代码方面，它也可能不像使用aria-label解决方案那样语义清晰（下面解释）。
您可以考虑为元素使用ARIA标签：
aria-label属性用于定义标记当前元素的字符串。在屏幕上看不到文本标签的情况下使用它。
我快速检查了Gmail和Facebook如何解决此问题（没有文字的按钮）：