Webサイトでテキストが選択できない場合の対策
たまにテキストの選択を許可していないWebサイトに出会います。ユーザビリティを下げることによって守ろうとしているものは何なのでしょうか？
私は昔からWebサイトの記事を精読するときは、テキストを選択しながら読む癖があります。テキストを選択しながら読むことのメリットは、テキストを選択することで、視点を選択しているセンテンスに集中させることができます。
視点を集中させることにより、意識を文章に向かわせています。
ところが、最近のWebサイトではテキスト選択を許可しないスタイルシートを適用していることがあります。具体的には以下のようなスタイルシートの定義がされています。
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none;はっきり言ってうざいです。おそらく、全文をコピーされることを防ごうとしているのでしょうが、それでは解決できていません。HTMLはソースを表示できますので、コピーを防ぐのは不可能です。あえてユーザビリティを下げてまでして行うべきことではありません。
ユーザファーストではないWebサイトには訪れなければいいのですが、それでもどうしても読みたい記事があった場合、やはりテキストを選択しながら読めないのは不便です。そういうWebサイトでもテキストを選択しながら読めるようにする対策をしましょう。
カスタムスタイルシートです。
大抵のブラウザーではカスタムスタイルシートが設定できます。これは身体的弱者向けの機能で、例えば色盲の人がカラーのコントラストを変えたりする目的で使うなどしますが、この機能を応用してテキストを常に選択可能にできます。
以下にSafariの例を示します。
* {
user-select: auto !important;
-webkit-user-select: auto !important;
-webkit-user-drag: auto !important;
}Safariでは上記のようなスタイルシートファイルを用意して、それをSafariの「環境設定」>「詳細」の「スタイルシート」の項目で選択します。
他のブラウザーでもカスタムスタイルシートが設定できれば、同じような対応が可能です。その場合、Firefoxでは「-moz-」というプレフィックス、ChromeやSafariでは「-webkit-」、IEやEdgeでは「-ms-」が必要になってきます。
Follow me!
