Wann man user-select: none verwenden sollte (und wann es zur UX/Accessibility-Falle wird)

Sie haben wahrscheinlich schon einmal zu user-select: none gegriffen, um zu verhindern, dass Text beim Klicken auf einen Button markiert wird. Es fühlt sich wie ein kleiner, harmloser Feinschliff an. Aber wenden Sie es an der falschen Stelle an, und Sie haben stillschweigend die Benutzererfahrung für einen bedeutenden Teil Ihrer Nutzer beeinträchtigt. Hier erfahren Sie, wie man es richtig einsetzt.

Was die CSS-Eigenschaft user-select tatsächlich bewirkt

Die CSS-Eigenschaft user-select steuert, ob ein Benutzer Text in einem Element markieren kann. Die häufigsten Werte, denen Sie begegnen werden:

• none — verhindert die Textmarkierung vollständig
• text — erlaubt die Markierung explizit (nützlich, um ein geerbtes none zu überschreiben)
• all — ein Klick markiert den gesamten Inhalt des Elements
• auto — der Standardwert, der basierend auf dem Kontext des Elements und dem berechneten Wert des Elternelements aufgelöst wird

Wenn Sie user-select: none auf ein Elternelement anwenden, verhindert dies effektiv die Markierung in untergeordneten Elementen, es sei denn, Sie überschreiben sie explizit mit user-select: text. Dieses Verhalten ist leicht zu vergessen und kann leicht Dinge kaputt machen.

Wann das Deaktivieren der Textmarkierung per CSS sinnvoll ist

Es gibt durchaus gute Gründe, zu user-select: none zu greifen. Der Schlüssel liegt darin, es eng begrenzt einzusetzen.

Buttons und button-ähnliche Links. Native <button>-Elemente sind standardmäßig nicht markierbar. Aber als Buttons gestylte <a>-Tags sind es, und versehentliche Textmarkierung während eines Klick-Ziehens ist ein echter Reibungspunkt. Die Anwendung von user-select: none ist hier angemessen.

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

Drag-and-Drop-Oberflächen und Slider. Wenn Benutzer durch Ziehen interagieren, konkurriert die Textmarkierung direkt mit der Geste. Das Deaktivieren auf dem ziehbaren Element verhindert, dass der Browser die Interaktion übernimmt.

Tab-Leisten, Symbolleisten und interaktive UI-Chrome-Elemente. Beschriftungen auf Tabs oder Icon-Buttons müssen nicht markierbar sein. Die Anwendung von user-select: none auf diese Komponenten hält Interaktionen sauber.

Ausschluss dekorativer oder Nicht-Inhaltselemente von Zwischenablage-Kopien. Wenn ein Emoji, eine Werbeanzeige oder ein Aside eine Benutzerkopie verschmutzen würde, hält das Einschließen in user-select: none die Markierung sauber, ohne sie breit zu deaktivieren.

Wo user-select: none zur UX- und Accessibility-Falle wird

Hier hören die meisten Artikel zu früh auf. Das Deaktivieren der Textmarkierung im falschen Kontext verursacht echten Schaden.

Inhaltsbereiche. Artikel, Dokumentation, Fehlermeldungen, Formularergebnisse und Code-Snippets sollten immer markierbar sein. Benutzer kopieren Text, um ihn zu suchen, zu übersetzen, in Tools einzufügen oder zu teilen. Dies zu blockieren ist Reibung ohne Vorteil.

Übersetzungs- und Text-to-Speech-Tools. Browser-Erweiterungen wie Google Translate und eigenständige Text-to-Speech-Tools arbeiten mit markiertem Text. Benutzer mit kognitiven Beeinträchtigungen, Legasthenie oder begrenzten Deutschkenntnissen sind auf diese Workflows angewiesen. user-select: none unterbricht sie stillschweigend.

Menschen, die durch Markieren lesen. Viele Benutzer – einschließlich solcher mit ADHS oder Arbeitsgedächtnisproblemen – verfolgen ihre Leseposition, indem sie Text während des Lesens markieren. Diese Fähigkeit auf inhaltsreichen Seiten zu entfernen, ist eine echte Barrierefreiheitsbarriere.

Verhalten der Seitensuche. Während Strg+F / Cmd+F unabhängig von user-select funktioniert, interagieren einige Browser-Umgebungen und assistive Tools mit dem Markierungsstatus auf Weisen, die nicht vollständig konsistent über Implementierungen hinweg sind.

Wichtig: Screenreader wie JAWS und NVDA parsen das DOM direkt und sind nicht auf Textmarkierung angewiesen, daher betrifft user-select: none sie nicht. Die Barrierefreiheitsrisiken liegen bei sehenden Benutzern, die auf markierungsbasierte Workflows angewiesen sind.

user-select: none ist kein Inhaltsschutzmechanismus

Es ist wichtig, dies klar zu sagen: user-select: none schützt Ihre Inhalte nicht. Jeder kann die DevTools öffnen, das CSS deaktivieren und in Sekunden frei kopieren. Es als Sicherheitsmaßnahme zu behandeln, tauscht echten Benutzerschaden gegen null tatsächlichen Schutz ein.

Eine praktische Regel für user-select und Barrierefreiheit

Wenden Sie user-select: none nur auf interaktive Steuerelemente an, nicht auf Inhalte. Wenn der Zweck eines Elements darin besteht, gelesen, kopiert oder referenziert zu werden, lassen Sie die Markierung in Ruhe.

/* Sicher: interaktive UI-Elemente */
button,
[role="tab"],
.drag-handle {
  user-select: none;
}

/* Tun Sie dies niemals bei Inhalten */
article,
p,
code,
.error-message {
  /* user-select: none — nicht tun. */
}

Noch eine Anmerkung zur Browser-Kompatibilität: Ältere Implementierungen erforderten Vendor-Präfixe (-webkit-user-select, -moz-user-select). Moderne Browser handhaben die unpräfixierte Eigenschaft gut, aber das Verhalten ist nicht perfekt einheitlich über alle Umgebungen hinweg, also testen Sie, anstatt anzunehmen. Vendor-präfixierte Versionen wie -webkit-user-select sollten nur hinzugefügt werden, wenn ältere Umgebungen unterstützt werden müssen, da sich das präfixierte Verhalten von der Standardeigenschaft unterscheiden kann.

Fazit

user-select: none ist ein nützliches Werkzeug für interaktive UI-Komponenten, bei denen versehentliche Markierung Reibung erzeugt. Es wird zur Falle, wenn es auf alles angewendet wird, was Benutzer lesen, kopieren oder referenzieren müssen. Halten Sie den Anwendungsbereich eng, verwenden Sie es niemals als Inhaltssperre, und Sie vermeiden die häufigsten Fehler.

FAQs

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