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?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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.