CSS sprites是否具有最大的可访问性？

Question

假设我想>用花哨的图像箭头替换链接.为此,我想使用CSS精灵.

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

• HTML:

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

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

但是,此方法在可访问性方面存在问题:如果禁用图像但解释了CSS,则上述链接将不可见.

有趣的是,我发现Paciello集团的一篇旧文章(2010年)提出了一个看起来很好的解决方案.我们的想法是<span>在要替换的文本旁边放置一个.它<span>有一个背景图像,位于文本的顶部.如果图像加载,它将替换文本,否则文本仍然可见.

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

Answer 1

主要的缺点是在加载CSS精灵之前向没有特殊辅助功能需求的用户显示文本.在代码方面,它也可能不像使用aria-label解决方案那样在语义上清晰(下面解释).

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

该aria-label属性用于定义标记当前元素的字符串.在屏幕上看不到文本标签的情况下使用它.

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

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

• 在Gmail中,"上一个"按钮的咏叹调标签为"较旧"
• 在Facebook中,右上方的"cog"图标有一些文本"帐户设置"缩进-5000em