[DÚVIDA] Mudar imagem ao passar o mouse // Boa prática?

[iW90]

Eu estou utilizando CSS para mudar um ícone na minha página ao passar o mouse.

<a href="www.link.com" target="_blank">
  <div id="img"> </div>
</a>

#img  {
  background-img: url(./imagem1a.png);
}

#img:hover {
  background-img: url(./imagem1b.png);
}

O que eu fiz foi criar uma <div> e aplicar um background-image nele para que eu pudesse trocar a imagem ao passar o mouse (usando o :hover). Só que ao utilizar este método, eu não tenho o atributo alt que mostra um texto caso a imagem não apareça. Por se tratar de um link (é um ícone que direciona a uma rede social), eu acho importante manter o texto alternativo (deixar evidente pra pessoa que aquilo é clicável e para onde é o link).

Eu pensei em usar o atributo title, mas ele só aparece caso a pessoa pare o mouse sobre o elemento.

Pesquisei um pouco mais e eu descobri uma outra forma, através do HTML com um comando inline:

<img src="./img/icone1a.png" onmouseover="this.src='./img/icone1b.png'" onmouseout="this.src='./img/icone1a.png'" alt="texto-alternativo">

Minha dúvida: Esse método no HTML é uma boa prática? Ou está caindo em desuso? Tem alguma outra forma que seria ideal?

• Resposta: Sim, o código acima é uma má prática, não é legal usar JS inline. O atributo não é obsoleto. E sim, há outra forma melhor dentro das boas práticas.

Com base na solução do colega abaixo, este foi o resultado:

Imagem significativa com alt e hover

[aricyrulin]

Sinceramente, não sei te dizer se é considerado uma boa prática ou não, mas não vejo pq não. A lógica funciona e é inteligente.

[pablolopes]

Eu não sei também, mas eu não curto muito.
Tenho pensando muito em inclusão digital, e o interessante é pensar em acessibilidade.
Tente sempre projetar pensando em acessibilidade!!!

[cristiane.dsc]

Eu acredito que se a imagem for apenas decorativa, não tem necessidade do atributo ´alt´, então você não estaria violando as boas práticas. O objetivo do texto alternativo é ajudar quem navega a saber o que seria exibido caso a imagem não carregue. Mas tanto faz se for só uma decoração.

[iW90]

@pablolopes
Não tem relação com acessibilidade nesse ponto específico. Para esse fim, podemos usar o aria-label para que o leitor indique do que se trata o link, mas ele também não resolve caso a imagem crashe (pessoas não-deficientes não usam o leitor). O alt serve exatamente para resolver o problema de caso a imagem não carregue. A troca de estilo ao passar o mouse é inclusive o default de links, por exemplo, então eu gostaria de aplicar o mesmo recurso numa imagem significativa com link.

@cristiane.dsc
No caso decorativo sim, daí uso o método que mencionei ali no CSS e não tem problemas. Só que quando usamos um ícone em redes sociais, ele não é meramente ilustrativo, ele exibe qual a rede social que o link está direcionando, e justamente por isso o alt é importante caso a imagem não carregue.

[tiago_feitoza]

Oi @iW90, não sei te dizer qual é a melhor prática, mas posso contribuir com uma alternativa em CSS:

<a href="http://www.google.com" target="_blank">
	<div id=logo>            
  		<img id=img1 src="https://upload.wikimedia.org/wikipedia/commons/7/77/Google_Images_2015_logo.svg" alt=logo>
        <img id=img2 src="https://www.w3schools.com/howto/img_avatar.png" alt=logo>
    </div>
</a>

<style>
#img1, #img2 {
    position: fixed; /*sobrepõe as imagens*/
    border: solid 1px black;
    height: 50px;
	width: 50px;
}

#img1{opacity: 1;} /*opaco*/
#img2{opacity: 0;} /*transparente*/
#img1:hover{opacity: 0;} /*transparente*/
#img2:hover{opacity: 1;} /*opaco*/
</style>

👉click para testar o código

[iW90]

Aaah, gostei! Vou testar por aqui! Agradeço!

[arakimikael]

Também não curto muito colocar estilização inline, @pablolopes

É muito bom quando pensamos em acessibilidade na web. O uso do alt é importante para essa prática, mas para um melhor desempenho nesse âmbito, é interessante entendemos os fundamentos e aplicabilidade do ARIA, como a nossa colega do tópico mencionou.

Para entendermos mais desse assunto, indico esse artigo muito bom:
Introdução à ARIA para acessibilidade na Web

[arakimikael]

@cristiane.dsc, o uso do alt é muito importante, mesmo para elementos decorativos/ilustrativos.

Além da acessibilidade, o alt é importante para os mecanismos de ranqueamento de página. Os buscadores analisam esses e outros aspectos para posicionar sua página em seus resultados de busca. É o que chamamos de SEO e você podemos conferir mais detalhes nesse artigo abaixo.

Alt Text: o que é texto alternativo e como ele funciona?

[sucodelarangela]

Não tem problema fazer isso desde que a acessibilidade não fique prejudicada. O que realmente não está sendo uma boa prática no seu código é usar o JavaScript diretamente no seu HTML, como você supôs fazer com “onmouseover” e “onmouseout”…

Em relação à acessibilidade, eu não deixaria o alt, visto se tratar apenas de um ícone (e estes são considerados, muitas vezes, meramente ilustrativos). E sua imagem está indo como background, então de qualquer forma já não será lido…
Como sua imagem está dentro de um link e, esse sim, deve receber relevância, você não chamaria atenção do ícone e sim do link.

Pergunta: seu link vai ter apenas a imagem? Não vai ter nenhum texto?

Se seu link tiver algum texto, esse texto vai ser lido pelo leitor de tela. Por exemplo:
<a href="https://teste.com.br">Facebook</a> = o leitor de tela vai ler “Facebook link”
Se esse for o caso de usar a tag img, coloque o alt da imagem vazio (alt='') e utilize o atributo aria-hidden='true' junto com o alt para que o ícone não seja lido por nenhum leitor de tela.

Se o se link realmente conter só a imagem, você pode criar uma classe específica para conseguir esconder visualmente o texto sem comprometer o leitor de tela. Eu uso a classe sr-only, que é usada pelo framework Tailwind CSS para isso. Ficaria assim:

No seu html:

<a href="https://teste.com.br">
  <span class="sr-only">Facebook</span>
  <div id="img"> </div>
</a>

No seu CSS:

/* Essa classe garante, de todas as formas, que todos os elementos que receberem ela não aparecerão de jeito nenhum na tela, mas, ainda assim, o leitor de tela fará a leitura normalmente. */
.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Não usar display: none; ou visibility: hidden; pois estes não permitem a leitura pelos leitores de tela */

[iW90]

Eu notei posteriormente que a segunda solução se trata de um JS direto no HTML e numa pesquisa soube que era má prática, mesmo.

No caso, o ícone não é meramente ilustrativo, e é justamente uma imagem sem um texto.
Por exemplo: os ícones de redes sociais, colocamos apenas o logo da rede social e o link nelas.

Mas não encontrei uma alternativa eficaz que mantivesse o recurso do alt. Minha dúvida não se trata de acessibilidade, pois assim como mencionei para outro colega acima, eu poderia usar o aria-label para leitores de tela sem problemas.

É uma questão mais de “em caso de erro”. Quando a imagem não carregar, ainda continuar existindo a legenda (alt), pois os usuários que não utilizam leitores de tela e recursos de acessibilidade teriam um espaço em branco sem saber que é clicável, ou sem saber para qual rede social está sendo direcionado.

O meu código foi só um exemplo pra explicar a minha dúvida, mesmo.

Até o momento, a resposta do @tiago_feitoza foi a melhor solução pro meu caso em específico, usando somente CSS e ainda mantendo o alt das imagens. Mas sua observação sobre acessibilidade é importante de forma geral, deve ser aplicado em todo o documento.

[sucodelarangela]

Bom, nesse caso, a utilização da classe pra esconder o elemento visualmente seria melhor do que a imagem em si. Pelo menos na formação de acessibilidade web que eu fiz e em outros conteúdos de acessibilidade que tenho consumido, essa é a forma mais “correta” para links e botões do que o uso de alt na imagem como item de título/legenda. Lembrando que tem sempre a opção do aria-label também… De qualquer forma, fica aí a contribuição

[iW90]

Obrigada!
Enxuguei um pouco o código, e o resultado final ficou assim:

<a href="https://www.linkedin.com/in/ingridwagner/" target="_blank">
    <img src="https://i.postimg.cc/hj3qtqxt/linkedin-v1.png" alt="Linkedin">
    <img id="imgtop" src="https://i.postimg.cc/nrjfsw-YY/linkedin-v2.gif" alt="Linkedin">
</a>

<style>
    img {
        position: fixed;
    }

    #imgtop {
        opacity: 0;
    }

    #imgtop:hover {
        opacity: 1;
    }
</style>

Teste do Resultado

[tiago_feitoza]

Parabéns @iW90 ficou bem melhor.

Na real eu não sabia como fazer, fui cruzando alguns conhecimentos até encontrar essa alternativa.

Fico muito feliz que tenha buscado uma formar de melhorar a ideia e ter voltado para compartilhar com a gente.

O pensamento coletivo pode mudar o mundo!