É importante garantir que todos os usuários, incluindo aqueles que vivem com deficiências, possam acessar sites sem problemas. Para pessoas que usam leitores de tela, os atributos aria-label e aria-labelledby fornecem informações cruciais sobre elementos da página que podem estar pouco claros ou invisíveis. Vamos ver o que são os atributos aria-label e aria-labelledby e os papéis que eles desempenham para tornar a web acessível para pessoas com deficiências visuais e relacionadas. Você notará que tanto aria-label e aria-labelledby são prefixados com aria. Então o que isso significa? ARIA significa Aplicações Ricas de Internet Acessíveis. É um conjunto de atributos prefixados com aria-, que permite aos desenvolvedores comunicar a finalidade dos elementos para tecnologias assistivas. O atributo aria-label é um rótulo invisível para elementos interativos. Ele adiciona um rótulo de texto a um elemento que leitores de tela podem ler. aria-label é especialmente útil para elementos que não possuem texto visível mas ainda precisam ser descritos por leitores de tela. Por exemplo, botões com apenas ícones frequentemente precisam de aria-label para transmitir sua finalidade. Aqui está um exemplo:

<button aria-label="Search">
  <i class="fa-solid fa-magnifying-glass"></i>
</button>

Neste caso, um leitor de tela pode anunciar este botão como Search, button, mesmo que o botão contenha apenas um ícone. O atributo aria-label informa aos leitores de tela qual texto usar no lugar do ícone. Se o botão contivesse o texto "Search" em vez de um ícone, então não haveria necessidade do atributo aria-label pois o texto forneceria o rótulo para o botão. Para elementos de entrada, o atributo aria-label fornece um rótulo diretamente se não houver um rótulo visível associado à entrada. O atributo aria-labelledby faz exatamente a mesma coisa que o atributo aria-label, mas em vez de definir o texto diretamente no atributo, você usa uma referência para um texto que já existe na página. O texto existente deve ter um atributo id, que será usado como valor de referência no atributo aria-labelledby. Aqui está um exemplo:

<input type="text" aria-labelledby="search-btn">
<button type="button" id="search-btn">Search</button>

Neste caso, o texto do botão está sendo usado como o rótulo para o input de busca. Leitores de tela anunciarão a entrada como algo como Search, edit. Se você decidir depois que quer mudar o texto do botão para Find, o rótulo do input será atualizado automaticamente para o novo texto já que ele está referenciando o texto do botão. Combinar múltiplos valores de id em um único valor do atributo aria-labelledby também é possível. Aqui está como isso funciona:

<div>
  <span id="volume-label">Volume</span>
  <span id="volume-details">Adjust the volume level</span>
  <input
    type="range"
    min="0"
    max="100"
    value="30"
    aria-labelledby="volume-label volume-details">
</div>

Para o slider, o leitor de tela irá procurar o conteúdo dos elementos volume-label e volume-details e anunciar Volume Adjust the volume level. Você viu que os atributos aria-label e aria-labelledby ajudam leitores de tela a entender o que os elementos fazem. Então, qual você deve usar? Como ambos fornecem a mesma funcionalidade, qualquer um pode ser usado, mas pode haver algumas vantagens em usar aria-labelledby em vez de aria-label:

• Se alguém estiver usando um serviço de tradução para traduzir o conteúdo da sua página, o texto em um atributo aria-label pode não ser sempre traduzido.
• Usar aria-labelledby também pode ajudar a evitar uma incompatibilidade entre o texto do rótulo visível e o rótulo invisível para usuários de leitores de tela, já que atualizar o texto visível atualizará automaticamente o rótulo invisível.
• aria-labelledby pode tornar muito mais fácil criar programaticamente rótulos invisíveis complexos consistindo em múltiplas fontes de texto.

Uma última observação, não use aria-label e aria-labelledby em um elemento ao mesmo tempo. Neste caso, o rótulo invisível para leitores de tela será sempre determinado por aria-labelledby e aria-label será completamente ignorado.