Quando precisamos fazer uso de recursos de WAI-ARIA para descrever objetos é muito comum confundirmos o uso desses três atributos. Apesar de muito parecidos eles tem características e semântica distintas e muito importantes.
Segundo o W3C, a descrição dos atributos são:
- aria-label: Define um valor de string que rotula o elemento atual.
- aria-labeledby: Identifica o elemento (ou elementos) que rotula o elemento atual.
- aria-describedby: Identifica o elemento (ou elementos) que descreve o objeto.
Percebe-se que os atributos aria-label e aria-labeledby são muito parecidos. A diferença entre eles é que o primeiro é uma string e a outra referencia a outro elemento para obter a descrição.
Exemplos:
<div role="region" aria-label="Previsão do tempo"></div>
<div role="region" aria-labeledby="dados"></div> <p id="dados">Exibição de dados pessoais</p>
Repare que ao usar aria-label o texto fica dentro do elemento <div>, isso significa que ele não é visível para o usuário. Já com o aria-labeledby os rótulos são visíveis. Sendo assim, aria-labeledby deve ser usado quando o texto é visível pelo usuário. Se essa informação deve ser exibida somente para usuários de tecnologia assistiva e invisíveis na tela, utilize aria-label. Ambos os casos servem para dar um nome acessível ao elemento.
O atributo aria-label é uma ótima forma de ampliar a descrição de um elemento, pois ele permite transmitir informações sem que essas estejam visíveis para todos os usuários, mas são acessíveis para usuários de leitores de tela.
A aplicação do atributo aria-describedby é a mesma do aria-labeledby. Ele faz referência a uma descrição em outro elemento, mas seu uso é recomendado para fazer uma descrição mais detalhada do elemento e não apenas apresentar um rótulo.
Exemplo:
<input type="text" aria-describedby="formulario"> <p id="dados">Preencha a descrição utilizando os dados recebidos no e-mail anterior</p>
Alguns cuidados importantes no uso desses atributos:
- Evite seu uso em elementos que já possuem texto. Em alguns casos o conteúdo de aria-label pode se sobrepor ao texto do elemento.
- Seu uso deve ser feito em elementos interativos, como âncoras, botões e campos de formulário. Para utilizar em elementos genéricos como <div> e <span> devem ser acompanhados de uma definição usando o atributo role.
Finalmente, resumindo de forma mais simples o post:
- aria-label adiciona um rótulo invisível ao elemento
- aria-labeledby relaciona um texto de rótulo visível ao elemento
- aria-describedby relaciona um texto de descrição visível ao elemento
Créditos da imagem: People photo created by nakaridore – www.freepik.com
