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.
<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.
<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>
Last updated
Was this helpful?