2

I've styled my webapp such that buttons use the default cursor, anchors use the pointer cursor (obviously), and buttons acting as anchors use the pointer cursor.

Semantically, should an anchor acting as a button (with [role='button']) use the pointer cursor or the default cursor?

Improve this question

2 Answers 2

Reset to default
0

It's a link... so... yes.

W3C User Interface guidelines describes the the pointer: “The cursor is a pointer that indicates a link”.

By using the pointer icon you indicate to the user that they will be navigating versus performing an action.

As an aside - buttons shouldn’t have a hand cursor (nor should just any old interactive element). Unless you have a compelling reason, you should not be screwing with the defaults. Thank you for not screwing with them.

But - do ask the question of why you have a "button" (visually speaking) that is actually a link. They aren't necessarily bad, but easy to abuse. Such things are commonly used as primary CTAs that navigate to a major landing; they shouldn't be a commonly used component though.

Improve this answer
3
  • I agree that pointer should be used to indicate a link, but I wasn't using the anchor tag as a link- I was using it as a button to call a javascript function. In the end I decided to change all instances of an anchor being used as a button to an actual <button>, which is of course more semantically correct since, as you said: By using the pointer icon you indicate to the user that they will be navigating versus performing an action.
    – wrymug
    Jul 7, 2017 at 17:28
  • @rosslh - You shouldn't be using button as a navigational component. Buttons represent actions, anchors (a) represent links. If you want a navigational link to look like a button, style an anchor to look like a button. Your comment makes it sound like you're using the former - but I might be misreading. The reason why is accessibility and making it easier for accessibility agents to parse your page.
    – Nicholas Pappas
    Jul 7, 2017 at 17:34
  • Sorry, I should have made myself more clear: before I was using a <a> tags (not styled like a button) as elements to interact with the page (e.g. deleting items on the page). My question was whether or not those non-hyperlinked <a> tags should have the pointer or default cursor. I have since changed those <a> tags to <button> elements. I still have in my webapp <a> anchor elements stylized as buttons as navigational components.
    – wrymug
    Jul 7, 2017 at 17:39
-1

If an element can be interacted with, use the pointer to indicate to the user. A cursor change is an event that provides visual hints.

This very page uses the pointer cursor for elements that are for:

  • Creation: 'Ask Question'
  • Navigation to another page
  • Editing: Text formatting, inserting media, images
  • Preferences: Voting and favoriting
  • Undo / Redo: in the toolbar
  • Details on demand: Hover on user profile
  • Updates: Click on inbox or reputation points

enter image description here

The exception is the 'text' cursor, used for input of text for search or the text in the answer or comment fields

MDN (Mozilla Developer Network) has a good guide to cursors, along w/ css and descriptions. For the pointer cursor they state:

The element can be interacted with by clicking on it. Used, e.g., when hovering over links. Typically an image of a hand.

If the other visual indications aren't perceivable (e.g. link colors that the user can't differentiate, lack of underlining), the cursor change on hover will provide some hint that potential for interaction exists.

Improve this answer
2
  • "Because UX.SE does it" isn't really a good excuse for doing something.
    – Nicholas Pappas
    Jul 7, 2017 at 15:40
  • Yes! Totally fair point @EvilClosetMonkey. Good catch, thank you... I do reference MDN as a guideline that's in wide use, and sets many standards. If you have some available research and studies, please post to improve my (and the community) knowledge.
    – Mike M
    Jul 7, 2017 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.