Erros comuns de nomeação que silenciam controles
Evite padrões que deixam elementos sem nome.
Erros comuns de nomeação que silenciam controles é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Quando os controles ficam em silêncio
Um controle sem nome calculado é lido apenas como botão ou link. Esses erros de nomeação deixam os usuários tentando adivinhar o que um elemento faz.
Botões somente com ícones
Um botão que contém apenas um ícone frequentemente não tem um nome calculado. Adicione um aria-label para que o controle sem texto ainda anuncie sua ação.
<button aria-label="Delete">🗑️</button>O placeholder não é um nome
Um placeholder não é um nome acessível confiável. Ele desaparece quando o usuário começa a digitar e muitos leitores o ignoram. Por isso, adicione um rótulo verdadeiro.
<input placeholder="Email">IDs de labelledby quebrados
Um aria-labelledby que aponta para um ID ausente ou escrito incorretamente não produz nome algum, desfazendo silenciosamente o rótulo que você pretendia criar.
<button aria-labelledby="ttl">x</button>aria-label vazio
Definir aria-label como uma cadeia vazia elimina o nome. O elemento fica sem nada para um leitor de tela anunciar.
<button aria-label="">Save</button>Ocultando o único texto
Colocar aria-hidden no único texto dentro de um botão remove a fonte do nome, fazendo com que o controle fique anônimo para os leitores.
<button><span aria-hidden="true">Next</span></button>Texto genérico de link
Links com os nomes Leia mais ou Clique aqui têm um nome tecnicamente válido, mas são inúteis fora de contexto, pois os usuários não sabem qual é o destino.
<a href="/post">Read more</a>Confiar apenas em title
Depender de title como único nome é arriscado. Essa é a fonte de menor prioridade, e vários leitores de tela a ignoram completamente.
Inputs sem label
Um input sem um label associado frequentemente não tem nome calculado, deixando os usuários sem saber o que devem digitar no campo.
<input type="text">Nomes duplicados
Dez botões chamados Editar obrigam os usuários a adivinhar qual linha será afetada. Dê a cada um um nome distinto que inclua o alvo da ação.
<button aria-label="Edit profile">Edit</button>Verifique com o inspetor
Abra o painel de acessibilidade do navegador e leia o nome calculado de cada controle. Se estiver em branco, há um erro a corrigir.
Verificação rápida
Um botão com ícone mostra apenas um símbolo de lixeira. Por que ele pode ficar em silêncio?
Recapitulação: mantenha os controles nomeados
Você aprendeu quais armadilhas silenciam os controles, de botões somente com ícones a IDs quebrados, e a verificar cada nome no inspetor. ✅
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Erros comuns de nomeação que silenciam controles” é grátis?
Sim — o texto completo de “Erros comuns de nomeação que silenciam controles” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Erros comuns de nomeação que silenciam controles”?
Evite padrões que deixam elementos sem nome. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Erros comuns de nomeação que silenciam controles”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- O cálculo do nome acessível, desmistificado
- aria-label versus aria-labelledby
- aria-describedby para contexto adicional
- Erros comuns de nomeação que silenciam controles