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