Quando Usar user-select: none (e Quando É uma Armadilha de UX/Acessibilidade)

Você provavelmente já recorreu ao user-select: none para impedir que o texto seja destacado quando alguém clica num botão. Parece um pequeno e inofensivo polimento. Mas aplique-o no lugar errado e você terá silenciosamente quebrado a experiência para uma fatia significativa dos seus utilizadores. Veja como usá-lo bem.

O Que a Propriedade CSS user-select Realmente Faz

A propriedade CSS user-select controla se um utilizador pode selecionar texto num elemento. Os valores mais comuns que encontrará:

• none — impede completamente a seleção de texto
• text — permite explicitamente a seleção (útil para sobrescrever um none herdado)
• all — um clique seleciona todo o conteúdo do elemento
• auto — o padrão, que é resolvido com base no contexto do elemento e no valor computado do seu pai

Quando aplica user-select: none a um elemento pai, isso efetivamente impede a seleção nos descendentes, a menos que os sobrescreva explicitamente com user-select: text. Esse comportamento é fácil de esquecer e fácil de quebrar coisas com ele.

Quando Desativar a Seleção de Texto CSS Faz Sentido

Existem razões genuinamente boas para recorrer ao user-select: none. A chave é mantê-lo restrito.

Botões e links semelhantes a botões. Elementos <button> nativos não são selecionáveis por padrão. Mas tags <a> estilizadas como botões são, e a seleção acidental de texto durante um clique-arrastar é um ponto de fricção real. Aplicar user-select: none aqui é razoável.

.btn {
  user-select: none;
  cursor: pointer;
}

Interfaces de arrastar-e-soltar e sliders. Quando os utilizadores interagem arrastando, a seleção de texto compete diretamente com o gesto. Desativá-la no elemento arrastável impede que o navegador sequestre a interação.

Barras de separadores, barras de ferramentas e elementos de interface interativos. Rótulos em separadores ou botões de ícones não precisam ser selecionáveis. Aplicar user-select: none a esses componentes mantém as interações limpas.

Excluir elementos decorativos ou não-conteúdo de cópias da área de transferência. Se um emoji, unidade de publicidade ou elemento aside poluiria a cópia de um utilizador, envolvê-lo em user-select: none mantém a seleção limpa sem desativá-la amplamente.

Onde user-select: none Se Torna uma Armadilha de UX e Acessibilidade

É aqui que a maioria dos artigos para. Desativar a seleção de texto no contexto errado causa dano real.

Áreas de conteúdo. Artigos, documentação, mensagens de erro, resultados de formulários e snippets de código devem sempre ser selecionáveis. Os utilizadores copiam texto para pesquisá-lo, traduzi-lo, colá-lo em ferramentas ou partilhá-lo. Bloquear isso é fricção sem vantagem.

Ferramentas de tradução e texto-para-fala. Extensões de navegador como o Google Translate e ferramentas autónomas de texto-para-fala operam sobre texto selecionado. Utilizadores com deficiências cognitivas, dislexia ou proficiência limitada em inglês dependem desses fluxos de trabalho. user-select: none silenciosamente os quebra.

Pessoas que leem destacando. Muitos utilizadores — incluindo aqueles com TDAH ou desafios de memória de trabalho — acompanham a sua posição de leitura selecionando texto à medida que avançam. Remover essa capacidade em páginas com muito conteúdo é uma barreira de acessibilidade genuína.

Comportamento de localizar-na-página. Embora Ctrl+F / Cmd+F ainda funcione independentemente do user-select, alguns ambientes de navegador e ferramentas assistivas interagem com o estado de seleção de formas que não são totalmente consistentes entre implementações.

Importante: Leitores de ecrã como JAWS e NVDA analisam o DOM diretamente e não dependem da seleção de texto, portanto user-select: none não os afeta. Os riscos de acessibilidade residem em utilizadores videntes que dependem de fluxos de trabalho baseados em seleção.

user-select: none Não É um Mecanismo de Proteção de Conteúdo

Vale a pena dizer claramente: user-select: none não protege o seu conteúdo. Qualquer pessoa pode abrir as DevTools, desativar o CSS e copiar livremente em segundos. Tratá-lo como uma medida de segurança troca dano real ao utilizador por zero proteção efetiva.

Uma Regra Prática para Acessibilidade do user-select

Aplique user-select: none apenas a controlos interativos, não a conteúdo. Se o propósito de um elemento é ser lido, copiado ou referenciado, deixe a seleção intacta.

/* Seguro: elementos de interface interativos */
button,
[role="tab"],
.drag-handle {
  user-select: none;
}

/* Nunca faça isto com conteúdo */
article,
p,
code,
.error-message {
  /* user-select: none — não faça. */
}

Mais uma nota sobre compatibilidade de navegadores: implementações mais antigas requeriam prefixos de fornecedor (-webkit-user-select, -moz-user-select). Os navegadores modernos lidam bem com a propriedade sem prefixo, mas o comportamento não é perfeitamente uniforme em todos os ambientes, portanto teste em vez de assumir. Versões com prefixo de fornecedor como -webkit-user-select só devem ser adicionadas ao suportar ambientes mais antigos, pois o comportamento prefixado pode diferir da propriedade padrão.

Conclusão

user-select: none é uma ferramenta útil para componentes de interface interativos onde a seleção acidental cria fricção. Torna-se uma armadilha quando aplicado a qualquer coisa que os utilizadores precisem ler, copiar ou referenciar. Mantenha o âmbito restrito, nunca o use como um bloqueio de conteúdo, e evitará os erros mais comuns.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..