CSS sprites for maximum accessibility?

Question

Suppose I want to replace the > link with a fantastic image arrow. For this, I want to use a CSS sprite.

In many articles, such as a recent (2012) article in Smashing Magazine , the recommended method looks something like this:

• HTML:

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

• CSS: hide text and specify sprite as background

However, this method is problematic in terms of accessibility: if images are disabled, but CSS is interpreted, then the specified link will be invisible.

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

Why is this method not widely used? Are there any problems with this solution?

Answer 1

The main drawback is showing the text to users without special accessibility requirements before your CSS sprite is loaded. From a code point of view, it also may not be semantically clean, as it uses the aria-label solution (explained below).

You can use the ARIA label for an element:

The aria-label attribute is used to identify the string that marks the current item. Use it when the text mark is not displayed 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 labeled Old
• On Facebook, the “cog” icon in the upper right corner has the text “Account Settings” with an indent of -5000em