> 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/aria-labelled-by.md).

# ARIA Labelled By

![](/files/BMrxiWSIB0fSSIMhGWeP)

### Problema

Vimos na seção anterior que os IDs para os elementos em uma página precisam ser únicos. Quando utilizados com o atributo `aria-labelledby` isso se torna ainda mais importante.

O atributo `aria-labelledby` é usado para indicar aos leitores de tela e ferramentas assistivas qual o rótulo para determinado elemento. Isso é feito usando os IDs dos elementos. Caso os IDs esteja duplicados, os leitores poderão indicar o valor errado para o rótulo, prejudicando a navegação de pessoas com tais problemas.

{% code title="Código com problemas" %}

```html
<div role="tabpanel" aria-labelledby="tabpanel-label">
    <h2 id="tabpanel-label">
        Tab panel title
    </h2>
    <p id="tabpanel-label">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>
```

{% endcode %}

### Recomendações

Garanta que todos os atributos `id` da página são únicos e que os atributos `aria-labelledby` estejam referenciando o elemento correto.&#x20;

{% code title="Código corrigido" %}

```markup
<div role="tabpanel" aria-labelledby="tabpanel-label-title">
    <h2 id="tabpanel-label-title">
        Tab panel title
    </h2>
    <p id="tabpanel-label">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
</div>
```

{% endcode %}