4

假设我想>用精美的图像箭头替换链接。为此，我想使用 CSS 精灵。

在许多文章中，例如在Smashing Magazine中最近（2012 年）的一篇文章中，推荐的方法是这样的：

  • HTML：

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

  • CSS：隐藏文本并将精灵指定为背景

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

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

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

4

1 回答 1

5

主要缺点是在 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 中，“上一个”按钮的 aria-label 为“Older”
  • 在 Facebook 中，右上角的“cog”图标有一些文本“Account Settings”缩进-5000em
于 2013-01-17T13:29:39.663 回答