user-select: none を使うべき場面(そしてUX/アクセシビリティの落とし穴となる場面)
ボタンをクリックした際にテキストがハイライトされるのを防ぐために、user-select: none を使ったことがあるでしょう。小さく無害な仕上げのように感じられます。しかし、間違った場所に適用すると、意味のある数のユーザーの体験を静かに壊してしまいます。適切な使い方を見ていきましょう。
重要なポイント
user-selectCSSプロパティは、ユーザーが要素内のテキストを選択できるかどうかを制御し、主な値としてnone、text、all、autoがあります。- 親要素に
user-select: noneを適用すると、すべての子孫要素がそれを継承するため、広範囲への適用はリスクがあります。 - 正当な使用例には、ボタン、ドラッグ&ドロップインターフェース、ツールバー、クリップボードのコピーを乱す装飾的な要素が含まれます。
- コンテンツエリア、記事、エラーメッセージ、コードスニペットで選択を無効にすると、テキストのコピー、翻訳、ハイライトに依存するユーザーに害を与えます。
user-select: noneはコンテンツ保護機能を一切提供しません — 誰でもDevToolsを使って数秒でバイパスできます。
CSS user-select プロパティが実際に行うこと
user-select CSSプロパティは、ユーザーが要素内のテキストを選択できるかどうかを制御します。最も一般的に使用される値は以下の通りです:
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;
}ドラッグ&ドロップインターフェースとスライダー。 ユーザーがドラッグで操作する場合、テキスト選択は直接ジェスチャーと競合します。ドラッグ可能な要素でこれを無効にすることで、ブラウザが操作を乗っ取るのを防ぎます。
タブバー、ツールバー、インタラクティブなUIクローム。 タブやアイコンボタンのラベルは選択可能である必要はありません。これらのコンポーネントに user-select: none を適用することで、操作をクリーンに保ちます。
装飾的または非コンテンツ要素をクリップボードのコピーから除外する。 絵文字、広告ユニット、またはアサイドがユーザーのコピーを汚染する場合、user-select: none でラップすることで、広範囲に無効化することなく選択をクリーンに保ちます。
Discover how at OpenReplay.com.
user-select: none がUXとアクセシビリティの落とし穴となる場面
ここからが、ほとんどの記事が触れない部分です。間違ったコンテキストでテキスト選択を無効にすると、実際の害が生じます。
コンテンツエリア。 記事、ドキュメント、エラーメッセージ、フォームの結果、コードスニペットは常に選択可能であるべきです。ユーザーはテキストをコピーして検索したり、翻訳したり、ツールに貼り付けたり、共有したりします。それをブロックすることは、利点のない摩擦です。
翻訳およびテキスト読み上げツール。 Google翻訳のようなブラウザ拡張機能やスタンドアロンのテキスト読み上げツールは、選択されたテキストに対して動作します。認知障害、ディスレクシア、または英語能力が限られているユーザーは、これらのワークフローに依存しています。user-select: none はそれらを静かに壊します。
ハイライトして読む人々。 ADHDやワーキングメモリの課題を持つ人々を含む多くのユーザーは、読み進めながらテキストを選択することで読書位置を追跡します。コンテンツの多いページでその能力を削除することは、真のアクセシビリティ障壁となります。
ページ内検索の動作。 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コンポーネントに対して有用なツールです。ユーザーが読んだり、コピーしたり、参照したりする必要があるものに適用すると、落とし穴となります。範囲を狭く保ち、コンテンツロックとして使用せず、最も一般的な間違いを避けましょう。
よくある質問
いいえ。JAWSやNVDAなどのスクリーンリーダーはDOMから直接読み取り、テキスト選択に依存しません。このプロパティは視覚を持つユーザーのための視覚的なテキスト選択動作にのみ影響します。真のアクセシビリティの懸念は、翻訳、テキスト読み上げツール、またはハイライトによる読書のためにテキストを選択することに依存するユーザーにあります。
いいえ。これはCSSプロパティであり、セキュリティメカニズムではありません。誰でもブラウザのDevToolsを開き、ルールを無効化または上書きして、テキストを自由にコピーできます。コンテンツ保護手段として使用しても、実際の保護は提供されず、テキストを選択する必要がある正当なユーザーに積極的に害を与えるだけです。
ほとんどの場合、プレフィックスなしの user-select プロパティはすべての最新ブラウザで動作します。ただし、一部の古いブラウザや特定のWebKitベースの環境では、まだ -webkit-user-select プレフィックスが必要な場合があります。レガシーブラウザをサポートする必要がある場合は、フォールバックとしてプレフィックスを含め、対象環境全体でテストしてください。
いいえ。body またはトップレベルコンテナに広範囲に適用すると、段落、見出し、コードブロックを含むすべてのコンテンツのテキスト選択が無効になります。これはコピー、翻訳ツール、ハイライトベースの読書を壊します。ボタン、タブ、ドラッグハンドルなどのインタラクティブ要素に厳密に制限してください。
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..
