# Nome discernível

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2Fc0OpuRXL2v4LEKGeGi7i%2Fimage.png?alt=media\&token=3ffa5d60-ea7c-4de1-862c-051c64557587) ![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FblbyFfJjiXwerjCMJ9EM%2Fimage.png?alt=media\&token=8da6a07f-6114-4049-93f4-c37a332aa3c2)

### Problema

Links e botões obtêm seus nomes acessíveis a partir do seu conteúdo de texto. Várias vezes usamos recursos visuais em nossos sites que estão presentes dentro de links, como ícones, que não provem informações textuais sobre o que representam. Isso dificulta a acessibilidade ao seu site, uma vez que leitores de tela não o conteúdo que aquele elemento representa.

### Recomendações

Em caso no qual o conteúdo do link ou botão não conseguirá prover um nome discernível a ele, use o atributo aria-label para prover uma informação sobre o que aquele link representa, ajudando os leitores de tela e aumentando a acessibilidade do seu site.

{% code title="Exemplo link antes" %}

```html
<a href="link">
    <img src="link-para-imagem-carrinho.png" />
</a>
```

{% endcode %}

{% code title="Exemplo link depois" %}

```html
<a href="link" aria-label="Carrinho de compras">
    <img src="link-para-imagem-carrinho.png" />
</a>
```

{% endcode %}

{% code title="Exemplo botão antes" %}

```markup
<button></button>
```

{% endcode %}

{% code title="Exemplo botão depois" %}

```markup
<button class="cart-icon" aria-label="Comprar"></button>
```

{% endcode %}