O cálculo do nome acessível, desmistificado

O nome acessível é o rótulo curto que um leitor de tela pronuncia para um elemento, como Enviar para um botão ou Pesquisar para um campo.

Se um elemento não tiver nome acessível, o leitor de tela anunciará apenas sua função, como “botão”, sem informar aos usuários o que ele faz.

Você raramente define o nome diretamente. O navegador executa um algoritmo de cálculo do nome sobre sua marcação para decidir como cada elemento será chamado.

O algoritmo verifica as fontes em uma ordem de prioridade fixa e usa a primeira que encontra. Conhecer essa ordem permite prever o resultado.

A prioridade mais alta é aria-labelledby. Quando presente, ele substitui todas as outras fontes, reunindo o texto dos elementos para os quais aponta.

Se não houver labelledby, o navegador usará aria-label, uma string que você insere diretamente no elemento como seu nome falado.

Em seguida vêm as fontes nativas, como um label associado a um campo de entrada ou o texto alternativo de uma imagem. Use-as sempre que puder.

Para muitos elementos, o nome vem do seu conteúdo textual. Um botão com o texto Salvar recebe o nome Salvar sem nenhum atributo adicional.

A fonte de menor prioridade é o atributo title. Ele só nomeia um elemento quando não existe nada melhor e é fácil não perceber sua ausência.

O nome calculado é achatado em uma única string, com os espaços extras reduzidos, para que quebras de linha e indentação nunca cheguem ao usuário.

O nome é como um elemento é chamado; uma descrição é um detalhe adicional lido depois dele. Hoje, vamos nos concentrar em acertar o nome.

Você aprendeu a ordem do cálculo do nome: labelledby, depois aria-label, depois rótulos e conteúdo nativos, com title por último. 🧩