pointer-events: none;だけでリンク無効化はよくないって話

2025年3月19日

「PCで電話番号リンクなんて必要ないから、無効化しておいて！CSS一行でできるから。」

私が働いている制作会社でこういわれました。

「CSS一行」とは、こういうこと（実際一行にはなっていませんが）。

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

たったこれだけで、画面幅が一定以上（PC想定）の場合に電話番号リンクがクリック無効になります。

ですが、本当にそれでいいのか？疑問に思いました。

この記事では、pointer-events: none; を使ってリンクを無効化する際に生じる問題点や、代わりに検討したい方法をまとめました。

そもそも「なぜPCだけ無効化？」を考える

わたし自身、最初は「電話番号リンクをPCで無効化するなんて発想なかったな…」と思いました。

「そもそもどんなメリットがあるの？デメリットは？」と気になって調べたり、人に聞いたりしてみました。

結論としては、メリットよりデメリットのほうが多いかもしれない…という印象です。

なぜならアクセシビリティやユーザー体験（UX）の面で多くの問題が出やすいから。

スクリーンリーダーやキーボード操作では <a> タグがあると「リンクがある」と認識されます。
しかし実際にはクリック（Enterキーやタップ）しても何も起きず、「壊れてるリンク？」と混乱を招きがちです。

普段からリンクは「クリックすると何かが起きる」と思われているので、反応しないリンクは不具合扱いされることもあります。
「このサイト、ちゃんと動いてないの？」と思われるのは避けたいですよね。

PC／スマホで画面サイズが切り替わると、リンクの可否が変わってしまう。
タブレットやウィンドウサイズを変えるユーザーにとって、「さっきは動いたのに急に動かなくなった…」と予想外の状態になります。

実はPCでもSkypeなどのソフトフォンを使う人がいたり、スマホを横向きにすると画面幅が大きくなるケースもあります。

また、PCとスマホをBluetooth接続して電話するなども可能です。

「PCなら電話番号不要だろう」という制作者の思い込みが通用しない場面も意外とあるものです。

もし本当にPCでは電話発信が必要ないなら、HTMLレベルでスマホだけに <a href="tel:〜"> を出し分けるのも手。

そうすればPCで見てもただのテキストになり、「見た目はリンクなのに押せない」問題は起きません。

「そもそもクリックしてほしいわけじゃないし、番号のコピーさえできればOK」というなら、リンクにしなくてもいいのでは？デザインでリンクらしさを消し、ユーザーを惑わせないようにします。

必ずしもPCから電話をかけない、というわけでもありません。

Skypeやクラウドフォンなどで連携するケースもあるので、必要に応じて「PCでもリンクは生かしておく」という選択肢はあり。

「PCとスマホで機能を変える」ことは意外とリスクが多い
pointer-events: none; でリンクを無効化するとアクセシビリティを損ねやすい
本当に無効化する必要があるか？ まずそこを考え、もし切り替えが要るならHTMLレベルの出し分けやJavaScriptなど、きちんとUXに配慮した方法で行う

安易に「CSS一行でOKだよ」と思ってしまうと、実はとても大切なユーザーが置いてけぼりになってしまうかも。

デバイスやブラウザがどんどん多様化している今だからこそ、「想定外の使い方」をしている人のことも考えながら、スマートに対応したいですね。

わたしもネットに落ちている記事をうのみにするのではなく、その方法をとった場合のメリットデメリットをわかったうえで選択していきたいと思います。

よかったらシェアしてね！