This link is only available by keyboard navigation
By @edent
· accessibility experiment HTML5 · 4 comments · 250 words · read ~269 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="https://example.com/"></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"
CSS
*, *: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.
The best keyboard-friendly site I’ve seen lately is https://commitmono.com/
You can also try the CSS
pointer-events: none, it will ignore mouse pointer events, but it may keep the keyboard navigation working (untested).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.@Edent
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.)
More comments on Mastodon.