Texto alternativo, frequentemente abreviado como alt text, é uma breve descrição em texto de uma imagem. Ele fornece informações essenciais sobre a imagem para usuários que não podem vê-la, como pessoas que usam leitores de tela e outras tecnologias assistivas. É essencial para tornar os sites acessíveis a pessoas com deficiências visuais. O texto alternativo também é usado por mecanismos de busca para entender imagens. Alguns navegadores também podem exibi-lo quando uma imagem não é carregada corretamente. Isso pode acontecer quando o arquivo de imagem está faltando ou quando o usuário está com problemas de conectividade. Então é útil para muitos propósitos diferentes. Uma pessoa com deficiência visual não será capaz de saber o que está na imagem a menos que ela seja descrita no texto alternativo. Um exemplo de texto alternativo ruim para uma imagem de um filhote seria "A cute puppy." <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/puppy.png" alt="A cute puppy." /> This text is not specific enough to convey the important details of the image, like what does the puppy look like? Onde está o filhote? Há algum objeto importante ao redor do filhote? Vamos melhorar isso. Um exemplo de um bom texto alternativo seria: "A black and white puppy with an orange collar lies on its belly in the sand, looking off to the side. Uma bola laranja brilhante repousa perto de suas patas dianteiras. Aqui você pode ver isso em HTML com um elemento de imagem, o atributo alt e uma descrição mais detalhada:

<img src="puppy.png" alt="A black and white puppy with an orange collar lies on its belly in the sand, looking off to the side. A bright orange ball rests near its front paws." />

É importante notar que não existe uma única maneira correta de escrever texto alternativo para uma imagem. O que você incluir na sua descrição dependerá do contexto em que a imagem é usada. Por exemplo, se a foto do filhote estivesse em um site sobre raças de cães, você poderia querer incluir mais detalhes sobre a descrição física do filhote e possivelmente ignorar o fato de que o filhote está na praia brincando com uma bola laranja. Em última análise, o texto alt que você usa para uma imagem deve refletir o propósito principal de incluir a imagem na página e as informações que você fornece devem dar às pessoas que não conseguem ver a imagem os detalhes necessários para entender esse propósito. Aqui temos outro exemplo de um belo resort tropical. Vamos descrevê-lo. <img src="https://cdn.G.E.A.R ACADEMY.org/curriculum/lecture-transcripts/resort.jpg" alt="Resort."> Um exemplo de texto alt ruim para esta imagem seria "Resort." Isto é muito curto e não fornece informações suficientes sobre a imagem. Para melhorar esta descrição, você pode expandi-la para incluir os elementos mais importantes da imagem: Resort tropical com piscina cercada por palmeiras e bangalôs. Você pode usar o atributo alt em HTML assim:

<img src="resort.png" alt="Tropical resort featuring a swimming pool surrounded by palm trees and bungalows." />

Agora que você sabe o que faz um bom e um mau texto alt, vamos ver algumas das melhores práticas.

• Você deve tentar manter o texto alt curto. Ele deve ser detalhado o suficiente para entender a imagem mas não tão longo a ponto de se tornar confuso.
• Você não deve tentar descrever cada pequeno detalhe. Foque nos aspectos mais importantes da imagem.
• Geralmente, você não precisa começar com "image of" ou "picture of." Você pode começar a descrição diretamente.
• Além disso, se houver texto semelhante ao redor da imagem, você não precisa escrevê-lo novamente.
• Normalmente, é recomendado terminar o texto alternativo com um ponto para consistência.
• Se a imagem for um link para outra página, em vez de descrever a própria imagem, o texto alt deve descrever o que acontecerá se os usuários clicarem nela.

Por exemplo, se o seu site tem um ícone de seta para a direita que leva o usuário para a próxima página, em vez de escrever um texto alt que apenas diga "right arrow", como neste exemplo, onde você pode ver o atributo alt com essa descrição:

<a href="about.html">
  <img src="arrow-right.png" alt="Right arrow." />
</a>

Você deve escrever algo assim em vez disso, onde o texto alt descreve o que acontecerá se os usuários clicarem na imagem. Eles irão para a próxima página.

<a href="about.html">
  <img src="arrow-right.png" alt="Go to next page." />
</a>

Apenas imagens que transmitam informações importantes devem ter texto alt. Se uma imagem for usada apenas para fins decorativos, ela deve ter texto null alt (vazio), para que possa ser ignorada por leitores de tela e outras tecnologias assistivas. Aqui está um exemplo de um atributo alt vazio:

<img src="decorative_image.jpg" alt="" />

Toda imagem no seu site deve ter um atributo alt, mesmo que esteja vazio. Se você omitir completamente o atributo alt, alguns leitores de tela lerão o nome do arquivo em vez disso, o que pode ser distrativo para pessoas que usam tecnologias assistivas, então isso não é recomendado. Finalmente, antes do seu site estar no ar, você deve testar cuidadosamente se os leitores de tela conseguem ler corretamente o texto alt. Escrever um texto alt eficaz é essencial para criar conteúdo web acessível. Como desenvolvedor web, ao fornecer descrições claras das suas imagens, você pode garantir que todos possam interagir com seu site em uma experiência online inclusiva.