ARIA Labelled By

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.

Código com problemas

<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>

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.

Código corrigido

<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>