Olhe para praticamente qualquer site na internet hoje e você verá que uma das coisas que eles têm em comum são as imagens. As imagens podem ser usadas em sites para adicionar um toque visual, ajudar a ilustrar ideias e adicionar conteúdo geral à página. Além de escolher as imagens certas e prepará-las adequadamente para a entrega na Web, certifique-se de que todas as imagens do seu site usam corretamente. O texto alternativo é uma parte muito importante do uso adequado dessas imagens para a web.
O que é o texto alternativo?
O texto alternativo é o texto alternativo usado pelos navegadores de texto e outros agentes de usuários da Web que não podem visualizar imagens. Também é um dos únicos atributos exigidos pela tag de imagem. Ao escrever um texto alternativo efetivo, você garante que suas páginas da Web estejam acessíveis a pessoas que possam estar usando um leitor de tela ou outro dispositivo assistido para acessar seu site. Você também garante que algo será exibido no lugar de uma imagem, caso ela não seja carregada por qualquer motivo (caminho errado, falha de transmissão, etc.). Este é o propósito real do texto Alt, mas este conteúdo também pode lhe dar mais lugares para adicionar texto SEO-friendly que os mecanismos de busca não o penalizarão (mais sobre isso em breve).
Texto alternativo deve repetir o texto na imagem
Qualquer imagem que tenha texto deve ter esse texto como texto alternativo. Você pode colocar outras palavras no texto alternativo, mas no mínimo, deve dizer a mesma coisa que a imagem. Por exemplo, se você tiver um logotipo para suas imagens, o texto alternativo deve repetir o nome da empresa escrito por seu logotipo gráfico.
Lembre-se, também, que imagens como logotipos também podem implicar texto - por exemplo, quando você vê o ícone de bola vermelha no site Dotdash, significa "Dotdash.com". Assim, o texto alternativo para esse ícone poderia dizer "Dotdash.com" e não apenas "logotipo da empresa".
Mantenha o texto curto
Quanto mais longo for o texto alternativo, mais difícil será ler os navegadores de texto. Pode ser tentador escrever frases longas de texto alternativo (normalmente isso é feito porque alguém está tentando preencher a tag com palavras-chave), mas manter suas tags Alt curtas mantém suas páginas menores e menores baixando mais rápido.
Uma boa regra para texto alternativo é mantê-lo entre 5 e 15 palavras no total.
Usando suas palavras-chave SEO em tags Alt
As pessoas muitas vezes pensam erroneamente que o objetivo do texto alternativo é colocar as palavras-chave do mecanismo de pesquisa. Sim, esse é um benefício que você pode usar, mas somente se o texto que você está adicionando fizer sentido para o propósito real da tag alt - para exibir um texto inteligente que explica o que a imagem é, caso alguém não consiga vê-la!
Agora, dito isto, o texto Alt não sendo usado como uma ferramenta de SEO não significa que você não possa usar suas palavras-chave neste texto. Como o texto alternativo é importante e necessário em imagens, é improvável que os mecanismos de pesquisa o penalizem por colocar palavras-chave nele se o conteúdo adicionado fizer sentido. Basta lembrar que sua primeira prioridade é para seus leitores. O spamming de palavras-chave em texto alternativo pode ser detectado e os mecanismos de busca mudam suas regras o tempo todo para evitar spammers.
Uma boa regra é usar as palavras-chave do mecanismo de pesquisa, onde elas se encaixam na descrição da imagem e não usam mais de uma palavra-chave em seu texto alternativo.
Mantenha seu texto significativo
Lembre-se que o ponto do texto alt é definir as imagens para seus leitores. Muitos desenvolvedores da Web usam o texto alternativo para si próprios, incluindo coisas como tamanho da imagem, nomes de arquivos de imagem e assim por diante. Embora isso possa ser útil para você, ele não faz nada para seus leitores e deve, portanto, ser omitido dessas tags.
Use texto alternativo em branco apenas para ícones e marcadores
Periodicamente, você usará imagens que não possuem nenhum texto descritivo útil, como marcadores ou ícones simples. A melhor maneira de usar essas imagens é em CSS, onde você não precisa de texto alternativo. Mas se você absolutamente deve tê-los em seu HTML, use um atributo alt em branco em vez de deixá-lo completamente desligado.
Pode ser tentador colocar um caractere como um asterisco (*) para representar um marcador, mas isso pode ser mais confuso do que simplesmente deixá-lo em branco. E colocar o texto "bullet" será renderizado ainda mais estranhamente em um navegador de texto.
Editado por Jeremy Girard em 3/3/17
