Boa noite! Poderíamos usar um elemento SPAN setado no CSS com o display:none? .icones-redes-sociais span { display: none; } E no HTML usar assim: span Github /span Semanticamente falando é uma boa prática?
Boa noite! Poderíamos usar um elemento SPAN setado no CSS com o display:none? .icones-redes-sociais span { display: none; } E no HTML usar assim: span Github /span Semanticamente falando é uma boa prática?
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:
.invisible { width: 1px; height: 1px; overflow: hidden; position: absolute; top: auto; left: -10000px; }
Funcionou perfeitamente.