Contexto
Ícones podem reduzir a densidade visual e acelerar a varredura de barras de ferramentas, ações recorrentes e controles compactos. Eles também podem ser interpretados de formas diferentes, perder significado fora de um contexto conhecido ou parecer decorativos quando a interface não explica sua função.
O problema não é usar um ícone sem texto em qualquer situação. O problema é retirar o rótulo visível sem verificar se a ação continua compreensível para as pessoas que usam a interface, incluindo quem não enxerga o ícone, quem amplia a tela, quem usa comando de voz ou quem acessa a interface em um dispositivo diferente.
Trate o botão só com ícone como uma decisão contextual, não como um padrão visual automático. Comece pela ação e escreva o verbo que a pessoa precisa entender, como pesquisar, fechar, excluir, compartilhar, filtrar ou salvar.
Use ícone sozinho apenas quando a convenção for forte. A ação deve ser reconhecível no produto e no contexto, como fechar uma janela, pesquisar ou reproduzir mídia.
Forneça um nome acessível. Use texto visível quando possível; quando o controle for realmente iconográfico, use um nome curto e específico com texto visualmente oculto, aria-label ou aria-labelledby, conforme a implementação.
Ofereça ajuda visual. Um tooltip ou outra indicação contextual pode explicar a ação para quem não reconhece o ícone, mas não substitui o nome acessível.
Garanta estados e interação mantendo foco visível, contraste, área de toque, estado pressionado ou selecionado e feedback após a ação.
Nomeie o objeto quando necessário. Em listas repetidas, use nomes como “Excluir relatório mensal”, não apenas “Excluir”.
Teste a compreensão verificando se as pessoas identificam a ação sem depender de explicação do designer e se a operação funciona com teclado, leitor de tela, zoom e toque.
Regra prática
Se o ícone precisa ser explicado antes de a pessoa agir, mantenha o rótulo visível. Se a ação é familiar, o contexto é claro e o controle continua nomeado e operável, o ícone sozinho pode ser adequado.
Base da recomendação
W3C exige nome acessível para controles interativos e recomenda priorizar texto visível quando ele puder nomear a ação. Baymard observa, em pesquisas de usabilidade de comércio eletrônico, que ícones acompanhados de texto reduzem ambiguidades e que botões precisam preservar intenção, foco e área de toque. Primer, Apple e GOV.BR documentam soluções contextuais para botões iconográficos: nome acessível, tooltip ou texto alternativo, foco e tamanho adequado. Essas fontes sustentam a acessibilidade e os critérios de decisão, mas não transformam nenhum ícone em universal.
Porque isso importa?
O ícone é percebido visualmente, mas a ação precisa continuar identificável por diferentes formas de acesso. Sem nome acessível, um botão pode ser anunciado apenas como “botão” ou com um nome vazio. Sem rótulo ou ajuda contextual, pessoas podem hesitar, errar a ação ou ignorar controles importantes.
O risco aumenta quando ícones semelhantes representam ações diferentes, quando o controle aparece fora do contexto em que foi aprendido, quando a ação é destrutiva ou quando há muitos controles compactos próximos. Um rótulo visível não é excesso quando evita interpretação, retrabalho ou perda de dados.
Quando usar?
- Use ícone sozinho para ações muito familiares no contexto.
- Use em barras de ferramentas com pouco espaço e ações recorrentes.
- Use quando o ícone tiver convenção consolidada no produto.
- Use quando houver nome acessível e foco visível.
- Use quando tooltip ou contexto próximo ajudar quem não reconhecer o ícone.
- Use com
aria-pressedou outro estado quando o controle for alternável.
Quando evitar?
- Evite ícone sozinho para ações novas ou pouco frequentes.
- Evite em ações destrutivas sem confirmação ou identificação clara.
- Evite quando o ícone tiver mais de uma interpretação plausível.
- Evite depender apenas de tooltip para nomear o controle.
- Evite controles pequenos, agrupados ou sem foco visível.
- Evite usar o mesmo ícone para ações diferentes.
Recomendações
Faça
- Nomeie a ação.
- Prefira texto visível quando houver dúvida.
- Use ícones conhecidos no contexto.
- Adicione nome acessível.
- Mostre foco e estados.
- Teste com pessoas.
Evite
- Esconder rótulos sem validar.
- Usar ícone ambíguo.
- Depender só de tooltip.
- Repetir ações sem diferenciar o nome.
- Reduzir a área de toque.
- Remover o foco.
