Elemento SPAN com image replacement

Depende... Qual o contexto?

Ele iria sumir com a imagem também. :/

O contexto seria o mesmo do exercício, e eu fiz aqui e funcionou, não sumiu a imagem.

Oi Charles,

Visualmente o resultado seria o mesmo. O que acontece é que por padrão os principais leitores de tela ignoram o conteúdo de elementos com display:none ou qualquer outra propriedade que os removam completamente da tela. Uma solução (famosa) pra aplicar nesse <span>seria essa:

width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
top: auto;
left: -10000px;

Pra mais explicações sobre o porquê dessas propriedades, dê uma olhada aqui: http://webaim.org/techniques/css/invisiblecontent/

Gostei da solução apresentada pelo Artur, não prejudica a semântica e/ou leitores de texto pois o elemento ainda possui um tamanho maior que 0, cumpre a missão de deixar invisível o conteúdo e pode ser reaproveitável em qualquer elemento que precise deste comportamento.

Fiz da seguinte maneira:

• Criei no meu CSS uma classe:

.invisible { width: 1px; height: 1px; overflow: hidden; position: absolute; top: auto; left: -10000px; }

• No HTML, utilizei um com esta classe, ficando assim, por exemplo:
• Github

Funcionou perfeitamente.