> 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

![](https://799659513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F30tSHvrN7e0UK3aUSC1K%2Fuploads%2FEpfKF0zArLy7Ssafh0fH%2Fimage.png?alt=media\&token=f5a76357-9cf3-442e-9a16-f171bd7a7fe3)

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