This link is only available by keyboard navigation

By on   4 comments 250 words, read ~239 times.

There's a link, right here ➡️⬅️ but, if you're on a touchscreen, you can't tap on it.

Using a mouse? Nope, that won't work either.

The only way to navigate to it is via keyboard navigation. Hit your Tab ⭾ button!

There's a little bit of me wants to build an entire website which can only be navigated by keyboard. What would the world look like if Engelbart never invented the mouse? Or if Johnson never published his work on touchscreens?

Anyway, there are two ways to do this. The first is to create an anchor with no content.

<a href=""></a>

Because there's no content between the opening and closing <a> elements, most browsers won't present it as a target for a mouse cursor or finger.

There's a second method, which only works at discouraging mouse use. It's possible to style a cursor with CSS. And that style can be "none"

*, *:hover { 
  cursor: none !important; 

The cursor is still there, but it is invisible. Which makes it difficult to know where your mouse is clicking.

Now, should you do this? No. It is silly. Reducing accessibility like this is never a good idea. But it is a fun experiment.

Thanks to Manuel Matuzović for inspiring me.

Share this post on…

4 thoughts on “This link is only available by keyboard navigation

  1. says:

    You can also try the CSS pointer-events: none, it will ignore mouse pointer events, but it may keep the keyboard navigation working (untested).

  2. says:

    This tickled me. You can also style a link with pointer-events: none;, which will at least foil the common mouse user. I haven't tested it with a touch device.

  3. says:

    I got to the secret message, but I couldn't comment because I'm on a different server (Or I just forgot my password) either way, that was interesting. I did remember that I can use SHIFT + tab to move back up from the top down. I learned this trick when my mouse died and I couldn't turn off the computer.)


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.