Когда использовать user-select: none (и когда это ловушка для UX/доступности)

Вы наверняка использовали user-select: none, чтобы предотвратить выделение текста при клике на кнопку. Это кажется небольшой безобидной доработкой. Но примените это свойство не в том месте — и вы незаметно испортите опыт для значительной части ваших пользователей. Вот как использовать его правильно.

Что на самом деле делает CSS-свойство user-select

CSS-свойство user-select контролирует, может ли пользователь выделять текст в элементе. Наиболее распространённые значения:

• none — полностью предотвращает выделение текста
• text — явно разрешает выделение (полезно для переопределения унаследованного none)
• all — один клик выделяет всё содержимое элемента
• auto — значение по умолчанию, которое определяется на основе контекста элемента и вычисленного значения родителя

Когда вы применяете user-select: none к родительскому элементу, это фактически предотвращает выделение в потомках, если вы явно не переопределите это с помощью user-select: text. Об этом поведении легко забыть, и с его помощью легко что-то сломать.

Когда отключение выделения текста через CSS имеет смысл

Существуют действительно веские причины использовать user-select: none. Ключевой момент — применять его точечно.

Кнопки и ссылки, стилизованные под кнопки. Нативные элементы <button> по умолчанию не выделяются. Но теги <a>, стилизованные как кнопки, выделяются, и случайное выделение текста при клике с перетаскиванием — реальная проблема. Применение user-select: none здесь оправдано.

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

Интерфейсы drag-and-drop и слайдеры. Когда пользователи взаимодействуют через перетаскивание, выделение текста напрямую конфликтует с жестом. Отключение его на перетаскиваемом элементе предотвращает перехват взаимодействия браузером.

Панели вкладок, панели инструментов и элементы интерактивного UI. Метки на вкладках или кнопках с иконками не нуждаются в выделении. Применение user-select: none к этим компонентам делает взаимодействие чище.

Исключение декоративных или неконтентных элементов из копирования в буфер обмена. Если эмодзи, рекламный блок или aside засорят копируемый пользователем текст, обёртывание их в user-select: none сохранит выделение чистым без широкого отключения.

Где user-select: none становится ловушкой для UX и доступности

Вот где большинство статей останавливаются. Отключение выделения текста в неправильном контексте причиняет реальный вред.

Области контента. Статьи, документация, сообщения об ошибках, результаты форм и фрагменты кода всегда должны быть доступны для выделения. Пользователи копируют текст, чтобы искать его, переводить, вставлять в инструменты или делиться им. Блокировка этого создаёт трение без какой-либо выгоды.

Инструменты перевода и озвучивания текста. Расширения браузера, такие как Google Translate, и автономные инструменты text-to-speech работают с выделенным текстом. Пользователи с когнитивными нарушениями, дислексией или ограниченным знанием языка зависят от этих процессов. user-select: none незаметно ломает их.

Люди, которые читают, выделяя текст. Многие пользователи — включая тех, у кого СДВГ или проблемы с рабочей памятью — отслеживают позицию чтения, выделяя текст по ходу. Удаление этой возможности на страницах с большим объёмом контента является настоящим барьером доступности.

Поведение поиска на странице. Хотя Ctrl+F / Cmd+F всё равно работает независимо от user-select, некоторые браузерные окружения и вспомогательные инструменты взаимодействуют с состоянием выделения способами, которые не полностью согласованы между реализациями.

Важно: Программы чтения с экрана, такие как JAWS и NVDA, парсят DOM напрямую и не зависят от выделения текста, поэтому user-select: none на них не влияет. Риски доступности связаны со зрячими пользователями, которые зависят от процессов, основанных на выделении.

user-select: none — это не механизм защиты контента

Стоит сказать прямо: user-select: none не защищает ваш контент. Любой может открыть DevTools, отключить CSS и свободно скопировать текст за считанные секунды. Рассматривать это как меру безопасности означает обменивать реальный вред пользователям на нулевую фактическую защиту.

Практическое правило для доступности user-select

Применяйте user-select: none только к интерактивным элементам управления, а не к контенту. Если назначение элемента — быть прочитанным, скопированным или использованным как справочный материал, оставьте выделение в покое.

/* Безопасно: интерактивные элементы UI */
button,
[role="tab"],
.drag-handle {
  user-select: none;
}

/* Никогда не делайте этого с контентом */
article,
p,
code,
.error-message {
  /* user-select: none — не надо. */
}

Ещё одно замечание о совместимости с браузерами: старые реализации требовали вендорных префиксов (-webkit-user-select, -moz-user-select). Современные браузеры хорошо обрабатывают свойство без префикса, но поведение не идеально единообразно во всех окружениях, поэтому тестируйте, а не предполагайте. Версии с вендорными префиксами, такие как -webkit-user-select, следует добавлять только при поддержке старых окружений, так как поведение с префиксом может отличаться от стандартного свойства.

Заключение

user-select: none — полезный инструмент для интерактивных UI-компонентов, где случайное выделение создаёт трение. Оно становится ловушкой, когда применяется к чему-либо, что пользователям нужно читать, копировать или использовать как справочный материал. Держите область применения узкой, никогда не используйте это как блокировку контента, и вы избежите самых распространённых ошибок.

Часто задаваемые вопросы

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