# Atributo ALT

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FAtw5Xx8sv1uJz2ihIQaE%2Fimage.png?alt=media\&token=cd761718-0ca2-4449-9eaa-b7bd164fa8b4)

### Situação

O atributo `alt` indica para o navegador e para os leitores de tela o possível conteúdo que as imagens contem. Isso permite que pessoas com problemas de acessibilidade consigam entender os elementos gráficos disponibilizados.

Elementos informativos precisam conter no atributo `alt` um texto alternativo curto e descritivo. Elementos decorativos podem ser ignorados com um atributo `alt` vazio.

### Recomendação

Forneça um atributo `alt` para cada elemento `<img>`. Se a imagem não carregar, o texto desse atributo será usado como um espaço reservado para que os usuários tenham uma ideia do que a imagem estava tentando transmitir.

{% code title="Exemplo" %}

```html
<img alt="iPhone 12" src="...">
```

{% endcode %}

Se a imagem atuar como decoração e não fornecer nenhum conteúdo útil, atribua a ela um `alt=""` vazio para removê-la da árvore de acessibilidade.

{% code title="Exemplo decorativo" %}

```markup
<img src="background.png" alt="">
```

{% endcode %}