Contexto
Uma ação pode estar indisponível porque ainda falta uma condição, porque não se aplica ao contexto atual, porque a pessoa não tem permissão ou porque o sistema está temporariamente indisponível. Nesses casos, a interface precisa decidir se mantém o controle visível ou se o remove.
Esconder e desabilitar comunicam coisas diferentes. Esconder reduz ruído e evita apresentar uma opção que não faz sentido. Desabilitar preserva a existência e a posição da ação, mas impede seu uso. A escolha deve considerar a relevância para o fluxo, a chance de disponibilidade futura, a necessidade de explicar o bloqueio e a possibilidade de descoberta por teclado.
Esconda a ação quando ela for irrelevante para o contexto atual, não puder ser usada por aquela pessoa e não houver motivo para que ela descubra ou solicite acesso. A ausência não deve desorientar o fluxo.
Mantenha a ação visível e use um estado desabilitado quando uma condição clara e temporária precisa ser atendida, quando a posição ajuda a entender o fluxo ou quando a ação é importante para completar a tarefa. Mostre o que falta e, se necessário, como resolver.
Se a ação precisa continuar visível e responder ao foco ou ao acionamento com uma explicação, use um estado inativo focável. Nesse caso, não use aria-disabled="true" se o controle ainda puder ser acionado para mostrar a explicação, pois esse atributo comunica que o elemento está inoperável. Se o controle não puder ser acionado, aria-disabled="true" pode manter sua descoberta por teclado, mas o código também deve impedir a operação.
Se a indisponibilidade vier de falha, permissão ou limitação de plataforma, preserve a descoberta e ofereça uma explicação persistente, uma alternativa ou um caminho de recuperação. Quando a disponibilidade ainda estiver sendo carregada, use um estado de carregamento em vez de esconder ou desabilitar sem contexto.
Porque isso importa?
Uma ação que parece disponível, mas não responde, gera incerteza. Uma ação escondida pode fazer a pessoa concluir que o recurso não existe. Já o estado nativo disabled costuma sair da sequência de tabulação, reduzindo sua descoberta por pessoas que usam teclado ou leitor de tela.
Em alguns fluxos, manter a ação visível ajuda a pessoa a entender o produto e encontrar o requisito. Em outros, bloqueá-la evita uma operação inválida ou duplicada. A escolha afeta clareza, prevenção de erros, eficiência e acessibilidade, por isso não deve ser tratada como regra universal.
Quando usar?
- Esconda a ação quando ela não fizer sentido para o contexto atual e sua ausência não causar desorientação.
- Esconda uma ação permanentemente indisponível para aquela pessoa quando não houver caminho de solicitação, upgrade ou descoberta que justifique mantê-la visível.
- Use desabilitado quando uma condição clara e temporária precisa ser atendida.
- Use desabilitado para evitar um novo acionamento durante o processamento, desde que o estado de carregamento e o retorno do sistema sejam comunicados.
- Mantenha a ação visível quando ela for central ao fluxo ou quando sua posição ajudar a explicar o que falta.
- Use um estado inativo focável quando a pessoa precisar consultar uma explicação ao focar ou acionar o controle.
- Use um estado de leitura quando o conteúdo precisar ser consultado, mas não editado; não confunda somente leitura com desabilitado.
Quando evitar?
- Não esconda uma ação central do fluxo só porque ela está temporariamente indisponível.
- Não desabilite sem explicar o motivo, o requisito ou o caminho para prosseguir.
- Não use um tooltip como única explicação para um controle nativo com
disabled, pois ele não recebe foco por teclado. - Não dependa apenas de cinza, opacidade ou baixo contraste para comunicar o estado.
- Não use
aria-hidden="true"para esconder visualmente uma ação focável. - Não use apenas
pointer-events: none; isso não impede necessariamente a ativação por teclado. - Não esconda ou desabilite enquanto a disponibilidade ainda estiver indefinida; mostre carregamento ou uma mensagem de estado.
- Não mantenha uma ação permanentemente desabilitada sem motivo para continuar presente.
Recomendações
Faça
- Classifique a causa: ação irrelevante, pré-requisito, carregamento, permissão ou falha externa.
- Esconda a ação irrelevante ou permanentemente sem caminho de descoberta.
- Mantenha a ação visível e desabilitada quando o pré-requisito for claro, temporário e relevante para o fluxo.
- Mostre o requisito em texto persistente e próximo ao controle.
- Use um estado inativo focável quando a explicação depender de foco ou acionamento.
- Preserve o rótulo e a posição da ação principal.
- Reative o controle assim que a condição mudar e comunique a mudança quando ela for importante.
- Teste a decisão com teclado, leitor de tela, zoom e modos de alto contraste.
Evite
- Esconder a ação principal sem informar como a tarefa pode ser concluída.
- Desabilitar uma ação que poderia validar a tentativa e explicar o que falta.
- Deixar o controle desabilitado depois que a condição já foi atendida.
- Usar tooltip, cor ou opacidade como única comunicação do estado.
- Marcar
aria-disabled="true"e manter a operação executável no código. - Remover da interface uma ação importante durante falha ou indisponibilidade temporária.
