Skip to content

The point of pointers, and the curse of cursors

I've been building websites for twenty years.

In that time I've had the same conversation about cursor: pointer far too many times. It's my own fault really that I haven't taken the time to write up a good answer once-and-for-all. I did post some details a decade ago, but I never took the time to write things out in a shareable fashion.

The conversation usually comes up when I build some sort of interactive component and someone asks me a question along the lines of:

Why didn't you add cursor: pointer to that button/tab/checkbox/[insert other word for clickable thing here]?

The short answer is, "it's not necessary".

The long answer is…the rest of this post.

Back in my day…

Let's start with a little bit of history.

Back when the web was a young step-sibling to HyperCard, people used to use a handful of text effects to bring attention to digital text:

  • CAPITALIZATION
  • italics
  • bold
  • underline
  • color

The styles were used relatively interchangeably and had no particular significance over the others to most authors, unless you were writing something like a citation for an academic paper.

Hyperlinks were a brand-new concept, where regular text could contain interactive buttons. This may seem banal now, but at the time it was revolutionary.

At the time buttons typically had some sort of visual treatment—often a box—to show that they could be clicked on. Hyperlinks were special. It didn't make sense to draw boxes around hyperlinks when they appeared in the middle of sentences, so someone had the bright idea to emphasize links with an underline.

And since underlined text was already common, someone had the bright idea to emphasize the links further by making them blue.

But being blue and underlined wasn't necessarily enough to tell people "this thing is a type of button that can be clicked on" due to how underlines and colors were already being used for emphasis. Also it's entirely possible someone might be colorblind and not be able to tell the difference between blue and black text.

In Human-Computer Interaction (HCI) the idea of a design indicating a possible action is called an "affordance".

I know that we now look at blue underlined text and can immediately identify it as being a link, but imagine you saw green italicized text in the middle of a sentence instead. That's how it felt to read hypertext in the early days of the web.

Because links didn't have any other hover effects, someone decided to add a hover effect where the cursor changed to a pointer in order to give links an affordance of clickability. This is similar to how the cursor changes to an I beam when hovering over text to give an affordance for text input and selection.

With the explosion in popularity of the web and related technologies (DHTML, stylesheets, web apps, etc), programmers started making links that looked like buttons. Maybe they couldn't have removed cursor: pointer or maybe they didn't understand why it was there in the first place. Regardless, somewhere along the way web developers made the mistaken assumption that things that could be clicked on needed to have cursor: pointer.

Never mind that the operating systems they'd been using the entire time rarely ever used cursor: pointer, designers and developers would insist that cursor: pointer be added to buttons, and tabs, and any other UI component that might have some sort of click behavior, regardless of whether the UI already had other hover effects to afford clickability.

The pointer cursor was always meant to be used for links. The CSS spec has said so for around thirty years (from the 1997-11-04 CSS2 Spec to the 2016-04-12 CSS2.2 Spec):

pointer

The cursor is a pointer that indicates a link.

So it should be clear at this point that cursor: pointer isn't needed for most interactive elements.

But what if I really want it?

If you read all of that and still want to add cursor: pointer to your styles, you MAY (RFC 2119), but I should also point out that some of your visitors might not use a mouse, opting instead for a keyboard or touch-screen device where the cursor is not visible.

If you do choose to use cursor: pointer, it's important that you carefully consider what other affordances you can offer your non-mouse using guests to make sure that they too are able to identify and use interactive components.

So what do you suggest?

If you've already made up your mind on what you're going to do, then you don't need to read this part, and can go about your day in peace.

If you're looking to me for guidance on how to proceed, I take inspiration from Antoine de Saint-Exupéry:

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

For any interactive component that doesn't absolutely require a pointer cursor, I would not recommend going out of your way to add it.