Using your own icons for the mouse cursor with accessibility in mind (CSS)
I don’t see many websites customising the icons for the mouse cursor. As a Linux user, I have an inclination to tweak the appearance of my system. I have tried out different cursor icon sets in the past and it can change the personality of the interface. It seems like a missed opportunity for websites!
There is a reluctance to customise the mouse cursor. It comes from a legitimate place. The cursor is critical to accessible navigation of websites. You could unintentionally mess up navigation for some people if you do not understand the acessibility concerns. More so, I think customising the cursor has been given a bad rep by some people being too flagrant. The majority of examples of custom mouse cursors that I have seen in the wild tend to be done extravagantly with JavaScript. They involve animated effects and unusual icons.
I don’t like to see a kibosh being put on a vector of creativity. I prefer advice that is oriented towards a happy path that has some guard rails. I haven’t see any practical advice in this space, so I thought I’d offer some.
What are the accessibility concerns?
- A website’s custom cursor overrides that of the system (OS). Users may prefer a modified cursor such as a high contrast version to aid navigation because of impairments such as weak eye-sight.
- People have different levels of digital literacy. Changing a core facet of the experience of using a website can be enough of a disruption that it makes a person abandon the website.
If I missed something here, let me know.
Some guidelines on using custom icons
My suggestion is to give users the choice to opt into using your icons. There isn’t a media query to establish an user’s preference unfortunately.
Use icons that are of an appropriate size (32 by 32 pixels or less). Choose icons that communicate the purpose of a contextual action e.g. you can select text here. Remixing the established metaphors for icons, such as an arrow for the default cursor, will offer users a more familiar experience. Most icon sets follow these conventions.
It’s also worth pointing out that for a valid CSS declaration involving the cursor property, a system fallback must be provided. An image for the cursor will always be loaded, it is similar to font-family in its application of fallbacks.
A good example
How about trying out a high quality icon set such as the WinConceptOS icon set?
Below is a demo that allows a user to opt into using the WinConceptOS icon set:
Final thoughts
I think the missing facet of this web feature is a media query, a “prefers custom cursors” query. This would resolve the accessibility concern of forcing a custom cursor on users. I guess that because customising website cursors is more of a niche thing to do, this has not been considered.
I see no issue with using a custom icon set for a cursor if you allow users to opt in, and you don’t do things that are egregious.
Let’s encourage creativity on the web and sound accessibility practices!