> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/core-web-vitals/acessibilidade/atributo-alt.md).

# Atributo ALT

![](/files/9EiDNDW6yHudT3iZ6N2w)

### 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 %}