two different uses of <span>: which is the best solution for accessibility?

Question

I want to substitute a piece of text with an image (for example, the word "call" with a phone icon) along some other text in a web page. I want this to work for normal user, without penalizing people who disable css (or don't have css active) and blind people that cannot see images [addendum]. Which is the better solution between the following two ones?

1.     <span title="call" class="s1"><span>


2.     <span class="s1 s2">call<span>

with:

.s1 {
    display:inline-block;
    background: url("call.png") no-repeat scroll 0 0 transparent;
    width:24px;
}
.s2 {
    overflow:hidden;
    text-indent: 30px;
}

P.S.: no <img> alternative, please.

Answer 1

Between the two alternatives given, 2 is evidently the right answer, i.e. it is clearly less detrimental to accessibility. When CSS is off, the element reduces to the word “call”, whereas alternative 1 reduces to the empty string. There is no guarantee that some software is able to announce the value of the title attribute. Consider, for example, the use of a normal graphic browser in purely visual mode, with no screen reader (with e.g. settings that override page CSS and enforce large enough font suitable for the user).

Even alternative 2 is bad for accessibility. When CSS is enabled, the word “call” is replaced by an icon. But there is no guarantee that the user can see it at all. And there is no way to specify alt text for a background image as you can do for content images. Moreover, what would you use as a phone icon? Most such icons are old-style, like ☎ or ✆, and there are more and more people who never used such a device.