Personalizando o Atributo alt

O Atributo alt é utilizado no elemento <img> para descrever o conteúdo das imagens presentes num blogue ou site.
Além de ser o que é apresentado quando uma imagem não carrega, serve também para melhorar a acessibilidade e ajuda os motores de busca (SEO) a entenderem o contexto visual, melhorando a sua classificação, aumentando as chances de melhor posicionamento, especialmente no Google Imagens.
No entanto, caso a imagem seja somente decorativa sem pertencer ao contexto de um artigo, mas sim como fundo da página ou ícone, o Atributo alt deve ficar vazio (alt="") ou inexistente.

A parte que importa para este artigo é o texto que é apresentado quando uma imagem não carrega.
Por regra, esse texto segue o mesmo estilo do restante texto da página, mas imagina que querias personalizar esse texto alternativo e somente esse texto. :thinking:

No outro dia estava a pensar nisso e lembrei-me do artigo You can style alt text like any other text do site CSS-Tricks que aborda esse assunto e sugere um truque bem fixe para possibilitar essa personalização.
Como é óbvio, primeiro temos que nos assegurar que o Atributo alt existe no elemento <img>.

Depois, vamos precisar de colocar um pequeno trecho de JavaScript que detecta quando uma imagem não carrega, e que quando isso acontece, adiciona um atributo à imagem — data-img-loading-error — que já pode ser seleccionado pelo CSS, o que nos permite dar os estilos que quisermos.

No entanto, sempre tento minimizar a dependência destes truques no ⁣JavaScript⁣, portanto, na demonstração a seguir, os dois primeiros exemplos são apenas com ⁣CSS⁣ numa versão alternativa e mais recente do mesmo truque, desta vez publicado no CSS Tip e que aposta no pseudo-elemento ::after para "esconder" o texto alternativo debaixo dum fundo opaco.
A explicação porque este método funciona é porque somente as imagens com carregamento incorreto aceitam pseudo-elementos como ::before e ::after, pelo que esses estilos não se aplicarão a imagens carregadas correctamente, como podes ver abaixo nos dois primeiros exemplos.

DEMONSTRAÇÃO:

HTML CSS JavaScript

          
<div id="exemplo">  
  <figure>
  <img class="testNOJS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MO3hcB0tjptfjkJxDTfJnCeNCtasf_lvUjrAryitx44IVUv4H_liVkK8NjgYyqQIwiba1fuG8Lvy1Ot9HXVI-_aJWpX5Wt4ifeOzKRVmZ9q5NPTRmRQqfi2KBC0-KJEczbAzKueYgKk/s250/DD_Untooned.jpg" alt="Esta imagem carrega normalmente, mas também não está abrangida pelo JavaScript."/> 
  <figcaption>
    Imagem com ligação válida, não abrangida pelo JavaScript
  </figcaption>
</figure> 
  <figure>
  <img class="testNOJS" src="https://via.placeholder.com/150" alt="Esta imagem nunca vai carregar, nem está abrangida pelo JavaScript, mas sendo personalizável no CSS com o pseudo-elemento :after."  rel="nofollow"/> 
  <figcaption>
    Imagem com ligação inválida, não abrangida pelo JavaScript
  </figcaption>
</figure> 
  <figure>    
  <img class="testJS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFDWbYbIhZf70IUYVHXBLw-9UAlWGjuF0ABFJDi-yqShdf1cJOQhowEaFcq35M-otxcVHj2NaWI38nXSEvQHwJI3vrwj0Zfl9VO3KhzrHYvAncxAB6Dyl2xMIJDjoaoZXAhiGkQeHV8s/s250/RussiaOctobriana.jpg" alt="" />
  <figcaption>
    Imagem decorativa com o atributo alt vazio 
  </figcaption>
</figure>
  <figure>    
  <img class="testJS" src="https://via.placeholder.com/150" alt="Esta imagem nunca vai carregar, mas dá-nos a oportunidade de personalizar como o atributo alt se apresenta com JavaScript e CSS tal como outro elemento de texto."  rel="nofollow"/>
  <figcaption>
    Imagem com ligação inválida que não carrega, mas pode ser personalizada através do CSS devido à inclusão do atributo data pelo JavaScript
  </figcaption>
</figure>
  <figure>    
  <img class="testJS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4sEEwose8bV4jH14Igy1z-SKS4uoEdj9GM07mJR3hh_WQB1X2bTQCjkPSgoykspTP5zN7JqEUtzM4DW6PuFftS3XoarzgQqLari1kuk95gurNYBnUmfSlMeZpObEfi0EUQ1xP13Lwjl4bPC3cDV7Xbinzp7AuXdLk-XAxbnNHe9oCxvIx-oeufLroQ3mn/s250/DarkNebulaAustralia.jpg" alt="Esta imagem abrangida pelo JavaScript, mas carrega normalmente não tendo por isso o atributo data." /> 
  <figcaption>
    Imagem com ligação válida, carrega normalmente embora contenha o atributo alt com uma descricção para o caso de falhar o carregamento por algum motivo
  </figcaption>
</figure> 
</div>
 

#exemplo {
  margin: 15px;
  line-height: 25px;
}
#exemplo figure {
  display: block;
  margin: 2px auto;
}
#exemplo figure img {  
  display: block;
  box-shadow: -1px 1px 2px #fff;
  padding: 5px;
  min-width: 80px;
  aspect-ratio: 1/1;  
  margin: 0 auto;
  outline: 2px solid rgba(120, 199, 255, 0.5);
  outline-offset: -12px;
}
#exemplo figure figcaption {  
  display: block;
  font-style: italic;
  width: 100%;
  font-size: 80%;
  text-align: center;
}
#exemplo .testNOJS {
  position: relative;
}
#exemplo .testNOJS::after {
	content: "Houve uma falha em carregar a imagem de \A'" attr(alt) "'\A 😞" / " ";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	background: #eee;
	border: 10px dashed !important;
	font: bold 80%/1.5 system-ui;
	white-space: pre-wrap;
	color: #E80E0D;
	padding: 10px;
}
#exemplo img[data-img-loading-error] {
  --img-border-style: 0.25em solid
    color-mix(in srgb, currentColor, transparent 75%);
  --img-border-space: 1em;

  border-inline-start: var(--img-border-style)!important;
  border-block-end: var(--img-border-style)!important;
  padding-inline-start: var(--img-border-space)!important;
  padding-block: var(--img-border-space)!important;
  max-width: 42ch!important;
  margin-inline: auto!important;
  padding: 5px;
  background: radial-gradient(ellipse at center, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%);
  color: #ffef05;
  font-size: 85%;
  font-weight: 700;
  text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}
 

const images = document.querySelectorAll("img.testJS");

if (images) {
  images.forEach((image) => {
    image.onerror = () => {
      image.setAttribute("data-img-loading-error", "");
    };
  });
}
 

Resultado

Imagem com ligação válida, não abrangida pelo JavaScript

Imagem com ligação inválida, não abrangida pelo JavaScript

Imagem decorativa com o atributo alt vazio

Imagem com ligação inválida que não carrega, mas pode ser personalizada através do CSS devido à inclusão do atributo data pelo JavaScript

Imagem com ligação válida, carrega normalmente embora contenha o atributo alt com uma descricção para o caso de falhar o carregamento por algum motivo

Podem perguntar qual a vantagem de personalizar o Atributo alt...
Nenhuma, trata-se apenas de estética; no entanto, existem pessoas que apreciam e optam por diferenciar esses aspectos. 8)
Então qual é a melhor maneira de usar o Atributo alt?

1. Ruim: <img src="laranja.jpg" alt=""/>
   Valor do atributo vazio, falta o texto alternativo.
2. Mau: <img src="laranja.jpg" alt="laranja laranjas laranjas alaranjadas cesto com laranjas laranjas grandes laranjas maduras e boas"/>
   Muitas palavras, descrição sem fazer sentido e confuso.
3. Bom: <img src="laranja.jpg" alt="laranjas"/>
   Valor do atributo curto, mas acertado.
4. Melhor: <img src="laranja.jpg" alt="um cesto com laranjas grandes"/>
   Valor do atributo detalhado e directo ao assunto sem exagerar com informação desnecessária.

Resumindo:

• Quando utilizar: Em imagens inseridas no artigo, escrevendo uma descrição clara, concisa (até um máximo de 125 caracteres), e relevante ao contexto da página.
  Evitar começar com "imagem de..." ou "fotografia de...".
• Quando não utilizar: Em imagens decorativas, como fundos ou ícones.

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?