假设我想用一个漂亮的图像箭头替换一个link>
。为此,我想使用一个css精灵。
在许多文章中,例如在Smashing Magazine中的最近一篇(2012)文章中,推荐的方法如下:
HTML:
<a href="/article/123" class="nextLink">></a>
css:隐藏文本并指定sprite作为背景
但是,这种方法在可访问性方面存在问题:如果禁用了图像但解释了css,那么上面的链接将是不可见的。
有趣的是,我发现了一个老的(2010年)article by Paciello Group建议什么看起来是一个好的解决方案。其思想是在要替换的文本旁边放置一个
<span>
。<span>
有一个背景图像,位于文本的顶部。如果加载图像,它将替换文本,否则文本仍然可见。为什么这种方法没有得到广泛应用?这个解决方案有问题吗?
最佳答案
主要缺点是在加载css sprite之前,将文本显示给没有特殊可访问性需求的用户。就代码而言,它在语义上也可能不如使用aria-label
解决方案那样干净(如下所述)。
可以考虑对元素使用aria标签:aria-label
属性用于定义标记当前元素的字符串。在屏幕上看不到文本标签的情况下使用它。
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
我很快检查了gmail和facebook是如何解决这个问题的(没有文本的按钮):
在gmail中,“previous”按钮有一个aria标签“older”
在facebook右上角的“cog”图标有一些缩进的文本“account settings”-5000em