Quand utiliser user-select: none (et quand c'est un piège UX/accessibilité)

Mar 2, 2026 · 4 min read

Quand utiliser user-select: none (et quand c'est un piège UX/accessibilité)

Vous avez probablement eu recours à user-select: none pour empêcher le texte de se surligner lorsque quelqu’un clique sur un bouton. Cela semble être une petite amélioration inoffensive. Mais appliquez-le au mauvais endroit et vous aurez discrètement cassé l’expérience pour une partie significative de vos utilisateurs. Voici comment l’utiliser correctement.

Points clés à retenir

La propriété CSS user-select contrôle si les utilisateurs peuvent sélectionner du texte dans un élément, avec none, text, all et auto comme valeurs principales.
Appliquer user-select: none à un parent fait que tous les descendants en héritent, rendant une application large risquée.
Les usages légitimes incluent les boutons, les interfaces de glisser-déposer, les barres d’outils et les éléments décoratifs qui encombreraient les copies dans le presse-papiers.
Désactiver la sélection sur les zones de contenu, les articles, les messages d’erreur ou les extraits de code nuit aux utilisateurs qui ont besoin de copier, traduire ou surligner du texte.
user-select: none n’offre aucune protection de contenu — n’importe qui peut le contourner via les DevTools en quelques secondes.

Ce que fait réellement la propriété CSS user-select

La propriété CSS user-select contrôle si un utilisateur peut sélectionner du texte dans un élément. Les valeurs les plus courantes que vous rencontrerez :

none — empêche complètement la sélection de texte
text — autorise explicitement la sélection (utile pour remplacer un none hérité)
all — un clic sélectionne tout le contenu de l’élément
auto — la valeur par défaut, qui se résout en fonction du contexte de l’élément et de la valeur calculée de son parent

Lorsque vous appliquez user-select: none à un parent, cela empêche effectivement la sélection dans les descendants à moins que vous ne les remplaciez explicitement avec user-select: text. Ce comportement est facile à oublier et facile à casser.

Quand désactiver la sélection de texte CSS a du sens

Il existe de véritables bonnes raisons d’utiliser user-select: none. La clé est de garder son application restreinte.

Boutons et liens stylisés comme des boutons. Les éléments natifs <button> ne sont pas sélectionnables par défaut. Mais les balises <a> stylisées comme des boutons le sont, et la sélection accidentelle de texte lors d’un clic-glisser est un véritable point de friction. Appliquer user-select: none ici est raisonnable.

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

Interfaces de glisser-déposer et curseurs. Lorsque les utilisateurs interagissent en glissant, la sélection de texte entre directement en concurrence avec le geste. La désactiver sur l’élément déplaçable empêche le navigateur de détourner l’interaction.

Barres d’onglets, barres d’outils et chrome d’interface interactive. Les étiquettes sur les onglets ou les boutons d’icônes n’ont pas besoin d’être sélectionnables. Appliquer user-select: none à ces composants maintient les interactions propres.

Exclure les éléments décoratifs ou non-contenu des copies dans le presse-papiers. Si un emoji, une publicité ou un encart polluerait la copie d’un utilisateur, l’envelopper dans user-select: none garde la sélection propre sans la désactiver largement.

Où user-select: none devient un piège UX et accessibilité

C’est là que la plupart des articles s’arrêtent. Désactiver la sélection de texte dans le mauvais contexte cause un réel préjudice.

Zones de contenu. Les articles, la documentation, les messages d’erreur, les résultats de formulaires et les extraits de code doivent toujours être sélectionnables. Les utilisateurs copient du texte pour le rechercher, le traduire, le coller dans des outils ou le partager. Bloquer cela est une friction sans avantage.

Outils de traduction et de synthèse vocale. Les extensions de navigateur comme Google Translate et les outils autonomes de synthèse vocale fonctionnent sur du texte sélectionné. Les utilisateurs avec des handicaps cognitifs, de la dyslexie ou une maîtrise limitée de la langue dépendent de ces flux de travail. user-select: none les casse silencieusement.

Les personnes qui lisent en surlignant. De nombreux utilisateurs — y compris ceux atteints de TDAH ou de difficultés de mémoire de travail — suivent leur position de lecture en sélectionnant du texte au fur et à mesure. Supprimer cette capacité sur des pages riches en contenu est une véritable barrière d’accessibilité.

Comportement de recherche dans la page. Bien que Ctrl+F / Cmd+F fonctionne toujours indépendamment de user-select, certains environnements de navigateur et outils d’assistance interagissent avec l’état de sélection de manières qui ne sont pas totalement cohérentes entre les implémentations.

Important : Les lecteurs d’écran comme JAWS et NVDA analysent directement le DOM et ne dépendent pas de la sélection de texte, donc user-select: none ne les affecte pas. Les risques d’accessibilité concernent les utilisateurs voyants qui dépendent de flux de travail basés sur la sélection.

user-select: none n’est pas un mécanisme de protection de contenu

Il vaut la peine de le dire clairement : user-select: none ne protège pas votre contenu. N’importe qui peut ouvrir les DevTools, désactiver le CSS et copier librement en quelques secondes. Le traiter comme une mesure de sécurité échange un préjudice réel pour les utilisateurs contre zéro protection réelle.

Une règle pratique pour l’accessibilité de user-select

Appliquez user-select: none uniquement aux contrôles interactifs, pas au contenu. Si le but d’un élément est d’être lu, copié ou référencé, laissez la sélection tranquille.

/* Sûr : éléments d'interface interactive */
button,
[role="tab"],
.drag-handle {
  user-select: none;
}

/* Ne faites jamais cela au contenu */
article,
p,
code,
.error-message {
  /* user-select: none — ne le faites pas. */
}

Une dernière note sur la compatibilité des navigateurs : les anciennes implémentations nécessitaient des préfixes vendeur (-webkit-user-select, -moz-user-select). Les navigateurs modernes gèrent bien la propriété sans préfixe, mais le comportement n’est pas parfaitement uniforme dans tous les environnements, donc testez plutôt que de supposer. Les versions préfixées comme -webkit-user-select ne doivent être ajoutées que lors de la prise en charge d’environnements plus anciens, car le comportement préfixé peut différer de la propriété standard.

Conclusion

user-select: none est un outil utile pour les composants d’interface interactive où la sélection accidentelle crée de la friction. Cela devient un piège lorsqu’il est appliqué à tout ce que les utilisateurs doivent lire, copier ou référencer. Gardez la portée restreinte, ne l’utilisez jamais comme verrou de contenu, et vous éviterez les erreurs les plus courantes.

FAQ

Non. Les lecteurs d'écran comme JAWS et NVDA lisent directement depuis le DOM et ne dépendent pas de la sélection de texte. La propriété n'affecte que le comportement de sélection de texte visuel pour les utilisateurs voyants. La véritable préoccupation d'accessibilité concerne les utilisateurs qui comptent sur la sélection de texte pour la traduction, les outils de synthèse vocale ou la lecture par surlignage.

Non. C'est une propriété CSS, pas un mécanisme de sécurité. N'importe qui peut ouvrir les DevTools du navigateur, désactiver ou remplacer la règle, et copier le texte librement. L'utiliser comme mesure de protection de contenu ne fournit aucune protection réelle tout en nuisant activement aux utilisateurs légitimes qui ont besoin de sélectionner du texte.

Dans la plupart des cas, la propriété user-select sans préfixe fonctionne sur tous les navigateurs modernes. Cependant, certains navigateurs plus anciens ou environnements spécifiques basés sur WebKit peuvent encore nécessiter le préfixe -webkit-user-select. Si vous devez prendre en charge des navigateurs legacy, incluez le préfixe comme solution de secours et testez dans vos environnements cibles.

Non. L'appliquer largement au body ou à un conteneur de niveau supérieur désactive la sélection de texte pour tout le contenu, y compris les paragraphes, les titres et les blocs de code. Cela casse la copie, les outils de traduction et la lecture basée sur le surlignage. Limitez-le strictement aux éléments interactifs comme les boutons, les onglets et les poignées de glissement.

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..