2
respostas

Aria-Label e Labeledby

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

2 respostas

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