CSS sprites最大限度地访问？(CSS sprites for maximum accessibility?)

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

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

HTML：

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

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

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

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

Suppose I want to replace a link > with a fancy image arrow. For that I want to use a CSS sprite.

In many articles, for example in a recent (2012) article in Smashing Magazine, the recommended method is something like this:

HTML:

CSS: hide text and specify sprite as background

However this method is problematic concerning accessibility: If images are disabled but CSS is interpreted, then the above link will be invisible.

Interestingly, I found an old (2010) article by Paciello Group that proposes what looks like a good solution. The idea is to place a <span> next to the text to be replaced. The <span> has a background image and is positioned on top of the text. If the image loads, it replaces the text, otherwise the text is still visible.

Why is this method not widely employed? Are there issues with that solution?

最满意答案

主要的缺点是在加载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

The main disadvantage is showing the text to users with no special accessibility needs, before your CSS sprite loads. In terms of code, it is also perhaps not as semantically clean as using an aria-label solution (explained below).

You could consider using an ARIA label for the element:

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

I quickly checked how Gmail and Facebook approach this problem (buttons without text):

In Gmail the 'previous' button has an aria-label of 'Older' in Facebook the 'cog' icon in top right has some text 'Account Settings' indented -5000em

更多推荐