Recomendação de curso:
Atributo alt do HTML <img>
Dica e Nota Definição e uso
O atributo é um atributo obrigatório, que determina o texto alternativo a ser exibido quando a imagem não puder ser exibida.
- Supondo que o usuário não possa visualizar a imagem devido aos seguintes motivos, o atributo alt pode fornecer informações alternativas para a imagem:
- Lentidão na conexão de internet
- Erro no atributo src
- O navegador desativou as imagens
O usuário está usando um leitor de tela
<img> O atributo alt do tag especifica o texto alternativo a ser exibido no navegador quando a imagem não puder ser exibida ou quando o usuário desativar a exibição de imagens.
Dica:Recomendamos fortemente que você use este atributo em cada imagem do documento. Assim, mesmo que a imagem não possa ser exibida, o usuário ainda pode ver algumas informações sobre o que foi perdido. Além disso, para pessoas com deficiências, o atributo alt é muitas vezes a única maneira de entender o conteúdo da imagem. Atributo titleSe precisar criar uma dica de ferramenta para a imagem, use
!
Notas:Dica e Nota O valor do atributo é uma string que pode conter até 1024 caracteres, incluindo espaços e pontuação. Esta string deve estar entre aspas. Este texto alt pode conter referências a caracteres especiais, mas não permite outras categorias de tags, especialmente não permite tags de estilo.
Notas:Quando o usuário mover o mouse sobre o elemento img, o Internet Explorer exibirá o valor do atributo alt. Este comportamento não é correto. Todos os outros navegadores estão se aproximando do padrão, exibindo o texto alternativo apenas quando a imagem não puder ser exibida.
Dica:Se precisar criar uma dica de ferramenta para a imagem, use Atributo title.
Exemplo
Exemplo 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulips" />
Se a imagem não puder ser exibida, o navegador exibirá o texto alternativo, como este:
Além disso, quando o usuário move o mouse sobre a imagem, os navegadores mais recentes exibirão o texto descritivo em uma caixa de texto. O código abaixo adiciona texto descritivo ao atributo alt da imagem:
Você pode mover o mouse sobre a foto abaixo para ver o efeito correspondente:
O texto dentro do círculo vermelho é o efeito exibido pelo navegador IE7 quando o mouse é movido sobre a imagem:
Exemplo 2
A imagem especificada para o texto alternativo é:
<img src="img_girl.jpg" alt="Menina em jaqueta" width="500" height="600">
Sintaxe
<img alt="Texto">
Valor do atributo
| Valor | Descrição |
|---|---|
| Texto |
Define o texto alternativo da imagem. Princípios de uso do texto alt:
|
Suporte ao navegador
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Suporte | Suporte | Suporte | Suporte | Suporte |
