> 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/nome-discernivel.md).

# Nome discernível

![](/files/v6hpivyoBK0Ptst8zyCs) ![](/files/YDub6x776Pyuo7yIoWZl)

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