Custom Cursor Accessibility

This content originally appeared on dbushell.com (blog) and was authored by dbushell.com (blog)

For the unaware, macOS has settings or preferences or whatever it’s renamed tomorrow. Buried deep within this UI labyrinth are pointer settings. Windows has similar hidden behind Candy Crush bloatware and Copilot slopware.

Personally, I find the default “normal” cursor ludicrously small on my 14-inch MacBook. I use two pips above the default so I can see the damned thing. I have completely average eyesight for a person my age. “Accessibility” benefits everyone 🙂

Custom Cursors

On the web, custom cursor designs were once fashionable like tying an onion to your belt. If memory recalls, the craze ended when Jobs killed Flash, but CSS has long allowed the cursor property to provide an image.

html {
  cursor: url("cursor.png") 5 10, pointer;
}

The cursor value includes an x/y hotspot and fallback value.

Now I hate to be a fun sponge but it’s probably best that you “Don’t use custom CSS mouse cursors”. If you must, please bear in mind the accessibility setting I noted above. If you make your cursor abnormally large, it will be comically large!

Take Wondermake for example. This is what I see:

Disney’s lawyers are on the phone!

A Human Future is another example:

I’m not going to lose sight of that!

By the way, I’m purposefully choosing recent examples from websites I think are neat. I even kinda like the giant cursors, I just expect the size is not what the designers intended.

The problem is that the custom cursors above do not match the default size. They’re nearly twice as large as “normal” to begin with. macOS has no idea it just scales up all the same.

Stuff & Nonsense does it better:

Andy Clarke’s cursors are scaled to closely match the default size. As a result it does not look over-sized at my two pip level.

I tested on Windows via remote desktop — “Windows App”, really Microsoft? — and it does not appear to share the same behaviour as macOS.

Windows does not appear to scale custom CSS cursors with the system setting. Is this a bug, or a feature? I’d argue that all cursors should scale with the system setting. Either way, it’s unpredictable! More reason to leave the cursor alone.

Anyone on Windows care to test and report back? It could be a remote desktop bug because it’s possible to stack both macOS and Windows settings for a multiplier. The following screenshot is real.

Prefers Defaults

The question is: how big of an accessibility concern is this? Fat-fingering on mobile is all too common. Cursors allow more precision but if the cursor is a fat finger itself, is that a problem? It’s at least worth considering.

I would suggest:

• match the default size
• design an obvious hotspot
• ensure contrast against the page
• provide hover states underneath

There is no CSS media query for pointer size but you can detect hover and fat fingers. Perhaps use something like this:

@media (any-hover: hover) and (pointer: fine) {
  html {
    cursor: url("cursor.png");
  }
}

This ensures there is at least a mouse or trackpad available to point at things. It does not mean the user is actually using it. Never try to second guess! They could be sat back in “agentic” mode in which case I’d give them a middle-finger.png.

Honestly I think a generic prefers-defaults media query would be a good idea. Is that too ambiguous? It would allow responsible (boring) devs to err on the side of caution. Or what about an opt-in prefers-avant-garde to signal you’re cool with the experimental.

This has been a public service announcement.

What do you think, are custom cursors good, bad, have I forgotten some clever CSS?

On a related note, I’ve been exploring game dev using <canvas>. A cursor can be rendered with JavaScript that tracks the mouse and cursor: none is used to hide the default. This CSS frequently breaks on macOS when combined with the Fullscreen API. In fact, macOS is steeped in cursor bugs across the entire system. Thanks, Apple.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

This content originally appeared on dbushell.com (blog) and was authored by dbushell.com (blog)