Nome acessível, link ou botão e ARIA
Um leitor de tela só consegue anunciar o que tem nome. Veja de onde vem o nome de cada elemento, quando usar link e quando usar botão, e a primeira regra do ARIA.
Estudar esta lição interativa →Imagine ouvir uma página sem ver nada e escutar, a cada controle, só "x", "botão", "botão". Você não saberia qual fecha o aviso e qual apaga a conta. O que o leitor de tela anuncia para cada elemento é o seu nome acessível, e na maioria das vezes ele vem de graça do HTML correto: o texto dentro de um botão ou link, o label de um campo, o alt de uma imagem, o title de um iframe. Quando o elemento não tem texto visível (um botão só com um "×"), é preciso dar o nome à mão, com aria-label.
Texto do elemento
Num botão ou link, o texto visível é o nome. "Ver planos e preços" é um bom nome; "clique aqui" e "saiba mais" são nomes fracos, porque, fora de contexto, não dizem nada.
label do campo
O que associamos por for/id no Módulo 5 é justamente o nome acessível do campo de formulário.
alt da imagem
É o nome da imagem (e, dentro de um link, é o nome do link). alt vazio diz ao leitor de tela para ignorar a imagem decorativa.
aria-label
Um nome escrito à mão, para quando não há texto visível, como um botão de ícone. Descreva a ação ("Fechar aviso"), não a aparência ("X").
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O botão × tem aria-label; o link navega para uma âncora; o botão Curtir executa uma ação. Abra as ferramentas do navegador e veja o nome de cada um na aba Acessibilidade.
Link ou botão? A pergunta é: o clique leva a outro lugar ou faz algo? Um link (<a href>) navega: para outra página, para outra parte da mesma página, para um arquivo. Um botão (<button>) executa uma ação: enviar, abrir um menu, curtir, salvar. Trocar um pelo outro engana o leitor de tela (que anuncia "link" ou "botão" e cria a expectativa certa) e quebra o teclado: o link é ativado com Enter, o botão com Enter e também com Espaço. Um <a href="#"> com onclick é o sintoma clássico de um botão fantasiado de link.
ARIA é um conjunto de atributos (aria-label, role, aria-expanded...) que descrevem elementos para tecnologias assistivas. A primeira regra, do próprio W3C, é: se existe um elemento HTML com o significado e o comportamento que você precisa, use-o em vez de remendar uma div com ARIA. O motivo: ARIA só muda o que é anunciado, não adiciona comportamento. Uma <div role="button"> é anunciada como botão, mas continua sem receber foco pelo Tab e sem responder a Enter e Espaço. Com <button>, tudo isso vem pronto. E ARIA errado é pior do que nenhum: promete algo que a página não cumpre.
Como saber se a sua página funciona de verdade? Teste. Três testes simples, nesta ordem: (1) só com o teclado: guarde o mouse e percorra a página com Tab, Shift+Tab, Enter e Espaço; dá para chegar em tudo, na ordem certa, vendo onde o foco está? (2) com zoom de 200% (Ctrl e +): o conteúdo continua legível, sem cortar? (3) com um leitor de tela: o NVDA (gratuito, no Windows), o VoiceOver (já vem no Mac e no iPhone) ou o TalkBack (Android) mostram como a página soa de verdade, e as ferramentas do navegador (aba Acessibilidade, ou o Lighthouse) ajudam a achar problemas antes.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Dê nome ao botão × e troque o falso link por um button.