Botões que anunciam o que fazem
Identifique claramente as ações para usuários que não conseguem vê-las.
Botões que anunciam o que fazem é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 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.
Os botões precisam de nomes
Um botão só é útil quando os usuários sabem o que ele faz. Seu nome acessível é o que o leitor de tela lê em voz alta antes de o usuário pressioná-lo.
O texto se torna o nome
Em um botão normal, o texto visível dentro dele é o nome acessível. Palavras claras resultam em um anúncio claro.
<button>Save changes</button>Diga qual é a ação
Rotule um botão com a ação que ele executa, como Salvar, Excluir ou Adicionar ao carrinho. Um verbo informa exatamente o que acontecerá.
Evite rótulos vagos
Rótulos como OK, Enviar ou Ir são vagos quando vários botões os compartilham. Identifique a ação específica para que cada botão faça sentido por si só.
O problema dos ícones isolados
Um ícone sem texto não tem nome acessível. O leitor de tela pode simplesmente dizer botão, deixando o usuário tentando adivinhar. 🤔
<button><svg>...</svg></button>Dê um nome ao botão com ícone
Dê um nome com aria-label a um botão sem texto. Agora o ícone continua visível, mas a tecnologia assistiva anuncia o que ele faz.
<button aria-label="Close dialog"><svg>...</svg></button>Oculte ícones decorativos
Quando um rótulo já identifica a ação, marque o ícone interno como aria-hidden para que ele não seja lido como ruído adicional.
<svg aria-hidden="true">...</svg>Anuncie mudanças de estado
Um botão de alternância deve informar seu estado. Use aria-pressed para que os leitores de tela digam se ele está ativado ou desativado.
<button aria-pressed="true">Mute</button>Conteúdo expansível
Um botão que mostra ou oculta um painel deve ter aria-expanded para que os usuários saibam se ele está aberto ou recolhido.
<button aria-expanded="false">Details</button>Mantenha os rótulos curtos e precisos
Um bom rótulo é curto, mas verdadeiro. Ele promete exatamente o que pressionar o botão fará, sem surpresas após o clique.
Combine o visível com o acessível
Se um botão tiver texto visível, mantenha essas palavras dentro do nome acessível para que usuários de controle por voz possam dizer o rótulo que veem.
Verificação rápida
Um botão de fechar que contém apenas um ícone mostra somente um X. Como dar a ele um nome acessível?
Recapitulação
Dê a cada botão um nome baseado em sua ação, rotule os que têm apenas ícones e exponha o estado com atributos aria. Agora os usuários sempre sabem o que eles fazem. 👍
Perguntas Frequentes
A aula “Botões que anunciam o que fazem” é grátis?
Sim — o texto completo de “Botões que anunciam o que fazem” é 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 “Botões que anunciam o que fazem”?
Identifique claramente as ações para usuários que não conseguem vê-las. 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 3 de 4.
Quanto tempo leva a aula “Botões que anunciam o que fazem”?
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
- Links levam a lugares, botões fazem coisas
- Texto de link que faz sentido fora de contexto
- Botões que anunciam o que fazem
- O antipadrão da âncora sem href