html - CSS Sprite 以获得最大的可访问性？

Question

假设我想替换一个链接 >带有花哨的图像箭头。为此，我想使用 CSS Sprite 。

在许多文章中，例如在 Smashing Magazine 中的一篇最近 (2012) 文章中，推荐的方法是这样的:

• HTML:

  <a href="/article/123" class="nextLink">&gt;</a>
  

• CSS:隐藏文本并指定 sprite 作为背景

但是这种方法在可访问性方面存在问题:如果图像被禁用但 CSS 被解释，那么上面的链接将不可见。

有趣的是，我发现了一个旧 (2010) article by Paciello Group提出了一个看起来不错的解决方案。这个想法是放置一个 <span>在要替换的文本旁边。 <span>具有背景图像并位于文本之上。如果图像加载，它会替换文本，否则文本仍然可见。

为什么这种方法没有被广泛采用？该解决方案有问题吗？

Answer 1

主要缺点是在加载 CSS Sprite 之前向没有特殊辅助功能需求的用户显示文本。在代码方面，它在语义上也可能不如使用 aria-label 解决方案(在下面解释)那么干净。

您可以考虑为元素使用 ARIA 标签:

The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

我快速检查了 Gmail 和 Facebook 如何解决这个问题(没有文本的按钮):

• 在 Gmail 中，'previous' 按钮的 aria-label 为 'Older'
• 在 Facebook 中，右上角的“齿轮”图标有一些文本“帐户设置”缩进了 -5000em