最大化可访问性的CSS精灵技术？

Question

最大化可访问性的CSS精灵技术？

4

假设我想用一个漂亮的图像箭头替换一个链接>。为此，我想使用CSS sprite。

在许多文章中，例如在Smashing Magazine的最近（2012年）一篇文章中，推荐的方法类似于以下内容：

HTML:

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

CSS: hide text and specify sprite as background

然而，这种方法在可访问性方面存在问题：如果图像被禁用但CSS被解释，则上述链接将不可见。
有趣的是，我发现了Paciello Group的一篇旧文章（2010年），提出了一个看起来很好的解决方案。这个想法是在要替换的文本旁边放置一个<span>。 <span>具有背景图像，并位于文本的顶部。如果图像加载，则替换文本，否则文本仍然可见。
为什么这种方法没有被广泛采用？那个解决方案有问题吗？

- feklee

1

如果您使用的是UTF8字符集，那么有很多不同的样式化箭头字符可用。您可以在Google上搜索可用箭头的列表，也许其中一个是您可以使用的类型？↝↣↠↬↯↱↳↺⇉⇄⇒⇗⇛⇢⇝➔➝➜➢➠➥➬➳➲➼（在小字体大小下有点难看到，但您可以将其复制/粘贴到文本编辑器中查看） - Ashley Sheridan

箭头只是一个例子。其他东西也可以是指向 Twitter 的链接，其中文本“Twitter”被鸟图标替换。当然，在链接到 Twitter 的情况下，文本将被 CSS 裁剪，但至少用户会看到有些东西。 - feklee

您可以创建“字体图标”，在这些情况下应该渲染（因为它们此时是文本的一部分）。http://fortawesome.github.com/Font-Awesome/是一个非常好的地方，可以让您对此概念有更深入的了解。 - rlemon

字体有单色的限制。 - feklee

图标的限制是盲人无法看到，因此仅使用图标也有局限性。我认为浏览时开启高对比度的人和盲人一样多（以您提供的文章作为例子）。 - Ashley Sheridan

@AshleySheridan，我之所以问这个问题是因为可访问性。Paciello Group的提议对盲人不起作用吗？ - feklee

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon Higgins · Accepted Answer

主要缺点是在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中，“previous”按钮具有“Older”的aria-label
在Facebook中，右上角的“齿轮”图标有一些文本“Account Settings”，缩进为-5000em