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