aria-label versus aria-labelledby

Quando a nomeação nativa não é suficiente, você tem duas ferramentas ARIA: aria-label para uma string inserida diretamente e aria-labelledby para apontar para um texto existente.

Use aria-label quando não houver texto visível para reutilizar. Insira o nome falado diretamente no próprio elemento.

Use aria-labelledby quando um texto visível na página puder servir como nome. Seu valor é o id desse elemento, não uma string.

Use primeiro aria-labelledby. Reutilizar o texto exibido na tela mantém automaticamente sincronizados o nome falado e o nome visível.

Forneça vários ids separados por espaços a aria-labelledby, e o navegador unirá o texto deles, nessa ordem, em um único nome.

Quando ambos estão presentes, aria-labelledby vence. O navegador ignora aria-label por completo; portanto, nunca espere que eles sejam combinados.

Com aria-labelledby, um elemento pode referenciar seu próprio id, o que é útil para nomear uma região usando o texto do seu título visível.

Um aria-label nunca aparece na tela. Ele altera apenas o que a tecnologia assistiva anuncia, portanto os usuários que enxergam não veem nenhuma diferença.

Um aria-label é texto simples que os tradutores de páginas frequentemente ignoram, enquanto labelledby reutiliza conteúdo visível que é traduzido.

O id de um aria-labelledby precisa corresponder ao id de um elemento real. Um erro de digitação deixa silenciosamente o elemento sem nenhum nome calculado.

Pergunte onde o nome está. Se ele já estiver na tela, use aria-labelledby; se existir apenas para a tecnologia assistiva, use aria-label.

Você aprendeu a usar aria-labelledby para texto visível existente e aria-label para nomes inseridos diretamente e invisíveis, sem esperar que eles sejam combinados. 🎯