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
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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 :)