Olá Tudo bem?
Tenho uma duvida, Qual a diferença entre o <aria-label>
e o <aria-labelledby>
? porque me pareceu que não tem muita diferença entre os dois.
Obrigada
Olá Tudo bem?
Tenho uma duvida, Qual a diferença entre o <aria-label>
e o <aria-labelledby>
? porque me pareceu que não tem muita diferença entre os dois.
Obrigada
Boa tarde, Sarah! Tudo bem?
Visualmente não é possível ver diferença.
O atributo aria-label
é usado para definir uma string na tag do elemento atual. Use nos casos que a tag do texto não seja visível na tela, no caso da aula do Modal usamos o area-label
para o leitor conseguir ler que aquilo é pra fechar a janela.
<button class="dialogNewsletter-fechar" type="button" aria-label="Fechar janela modal">
Fechar modal //Mesmo que esteja escrito aqui, na tela é um X
</button>
Já o aria-labelledby
identifica o elemento (ou elementos) pelo id que rotula o elemento atual. Por exemplo no Modal: se ele só abrisse e falasse somente que abriu não faria sentido para o usuário, então associamos que o elemento que da contexto para esse modal é o que contem a id="tituloDialog".
<div class="dialogNewsletter" id="dialogNewsletter" role="dialog" aria-labelledby="tituloDialog">
<div class="dialogNewsletter-body">
<h2 class="dialogNewsletter-titulo" id="tituloDialog">News sem spam</h2> //isso que será lido
<!--...-->
</div>
</div>
Espero ter ajudado a ficar um pouco mais claro. Qualquer coisa pode contar conosco =)
Bons estudos!
Obrigada, agora ficou mais claro :)