What user-select: none Really Does, and the Accessibility Bill It Runs Up

The CSS user-select property sets whether the user can select text with their mouse or keyboard. At none, it is intended to block direct text selection by the user. But despite its appearance of blocking selection its visual effect, it remains surprisingly text-readable and reachable via browser features.

What user-select: none really does

user-select: none stops the user from selecting the designated text in their local view of the page. This effect applies to the styled element and its descendants, but not to content managed as part of the browser’s UI. And selection for purposes like copy-and-paste, screen reading, and keyboard navigation can still be present in the browser’s internal Selection object.

The MDN documentation from 2026-04-20 explains the property’s behavior and a workaround for applying it to user-interface elements:

"The Selection object may still contain content styled with user-select: none;. To prevent this, you can create an event listener for the copy event, that prevents it if the copied content matches the content you applied user-select: none; on."

Why user-select: none is applied

Browsers often see text selection blocked on UI elements like control bars, tabs, and toolbar items. As the WebFX article from 2026-04-20 observes, it protects against users inadvertently selecting elements meant for interacting with:

"Text that isn't meant to be selected can be selected by an accidental keystroke, click, or touch, so disabling the select feature can help prevent this."

The same article suggests applying it to buttons and logo images as part of a UI kit, noting its near-universal support across newer browsers and mobile devices.

Why user-select: none is not a content safeguard

While it stops visual selection on the user’s device, user-select: none does not protect the text from being copied or read. The OpenReplay article from 2026-03-02,, reports that the CSS is easily circumvented through browser developer tools:

"When a website uses user-select: none to prevent text selection, it is so easy for a developer to remove this setting that a surefire code-blocking technique [is] a bug, not a feature!"

The OpenReplay article continues: "When you disable select on content areas, articles, error messages, or code snippets, you harm the users who rely on copying, translating, highlighting, and sharing this text by default."

W3Docs also emphasizes that this tactic does not does not protect content. In a post from 2026-07-16, they wrote: "The CSS user-select does not restrict copy-paste or give you any security. It only hides the selection of text."

The inheritance risk

A user-select: none rule will propagate to descendant elements according to the OpenReplay article and W3Docs:

"Almost all web standards are inherited, so it’s no surprise to see user-select work this way. [This] means you have to account for spacing when you disable text select, because the rule of inheritance means it applies to all children."

The MDN documentation also specifies this, adding: "the computed value for the child is none if the parent’s computed value is none, except in textboxes." While this can improve consistency, it also increases risk for `elements in content areas where text selection is desirable.

What the browser still knows

The text selection is computed and stored in the browser’s Selection object within the DOM.

According to the MDN documentation, this object is still built even when visual content is not selectable under user-select: none. The MDN documentation from 2026-04-20 explains: "The Selection object can still contain elements styled with user-select: none. [To prevent this] you can create an event listener for the copy event, that prevents it if the copied content matches the content you applied user-select: none; on."

The internal Selection object exposes the selected text during copy-&-paste even when visual selection is blocked under user-select: none. Additionally, the text is still readable by screen readers and accessible through keyboard selection, highlighting its continuing presence.

In conclusion, user-select: none merely blocks text selection in the presented experience, leaving the content open to full access and rendering through browser controls. Its impact is confined to stopping keyboard, mouse, and touch interaction with content, while leaving the source open to other extraction tools and copy workflows native to the rendering engine.