Cursor change to a finger over accordion

The mouse cursor doesn’t change to a finger over the accordion section, indicating they’re clickable.

Here are two examples of how the cursor changes over accordion, Service NSW and DTA.

https://www.service.nsw.gov.au/guide/death-and-bereavement

Can this be changed?

1 Like

Thanks for the post @rika.johnander!
Using the pointer hand for “clickable elements” has been debated on the internet for years.

From my point of view the pointer hand should only be used when hovering over text links as what is defined in the w3c css spec

The cursor is a pointer that indicates a link.

Microsoft also has in their documentation

Text and graphics links use a hand or “link select” pointer because of their weak affordance. While links may have other visual clues to indicate that they are links (such as underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link.
To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command buttons already have a strong affordance, so they don’t need a hand pointer. The hand pointer must mean “this target is a link” and nothing else.

Being able to click on something doesnt automatically mean it needs a pointer hand, for example form label and inputs if you click on the label it actually focus the cursor on the input for you. Adding the pointer here wouldnt be right.

I do think there is a bigger question out of all this, that being:
Is the affordance of the accordion so poor that people are not realising it is clickable?

If that is the case iterating on the design would ideally be the task to take out of this because the pointer hand is only a desktop/mouse based UI element and if the affordance is weak on desktop the same would be on mobile/touch devices and we cant show a pointer hand there.

I look forward to discussing this further with you and the wider community.

Hi, I’d like to add in a few more examples where a pointer hand appear upon hover on cards and buttons; the screenshot was from preview.nsw.gov.au which uses the Design System components.

On tests, we observed that people determine if something (whether it is a line of text, an icon, a bar or a button) is clickable by hovering above the item and their visual cue is the pointer hand (sometimes in addition to other cues such as a colour change).

Accordions have been around for many years but a pointer hand serves as an additional cue for people who are still not familiar that there is more content beneath an accordion (and that they need to click for content to be shown).

We should help out easing cognitive burden when we can and when it is applicable.

A pointer hand on hover over an accordion is helpful. And if there are pointer hands showing on hover on cards and buttons, why not on accordions for consistency?

Looking forward to a discussion with the community.

Hi,
As per the WCAG guidelines, the information and the operation of the user interface must be understandable and predictable. I agree with Charissa that the change of the cursor to a finger will help the user understand that the accordion is clickable.

On this WCAG website the cursor change over accordions.
https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=136%2C251%2C321#pointer-gestures

Here’s a few examples from other governments:

UK

Denmark
https://www.borger.dk/familie-og-boern/Aegteskab-og-parforhold/Naar-I-vil-giftes

(I wanted to add examples from a few other governments but apparantly I’m only allowed to put in two links…)

Thanks for the response.

Cards and some of those “buttons” in your screenshot are actually links, hence why the pointer cursor is showing.

It would be interesting to see any notes from your research that users actively acknowledge the cursor changing to a pointer and use that as their primary indication and its not related to color changes on the element as well.

With that sort of information we can justify changes, it also help us when someone has an opposing opinion or questions the change.

It also would serve as a good piece of information to be shared with the wider web development community in a blog post.

Thanks for the response.

Keeping interfaces understandable and predictable its worth noting most of the interface designs we use on the web come from computer operating systems.
As an example if you were to look at the “About this mac” window, that window features tabs buttons and links. In the example gif below you can see how the cursor is treated.

pointer

The same goes for windows 10, currently I dont have access to screen recording of the experience.

All these interfaces are used daily but don’t feature a pointer cursor for anything other than links.

Hi @SeanElliott - I’m thinking about whether the predicable / consistent behaviour would mean that we should make the accordion cursor work the same as the step-by-step guides, which are after all, just another version of accordions. The pointer cursor does change as well as the underline appearing on the selected step.

Good point about consistency and predictability. We also have to remember that a surprising number of our customers/citizens have very low familiarity and skill in using operating systems and digital interfaces.
So in thinking about consistency and predictability it may be most effective to apply it from within (ie if the user can interact with an element, the cursor changes) rather than in reference to more arcane norms.
We recently tested accordions as part of a step by step process, with cursor change on scroll over with 16 participants of varying ages, background, abilities and digital literacy. 15 recognised that they could open the accordions via this visual cue. One still did not.

1 Like

Thats very interesting @RachaelQuigley do you think you could share your findings with @mike.hall, I’m sure he would be keen to hear about this too.

1 Like

Yes please @RachaelQuigley and @jennifer.weiley any research you have would be more that useful.

Thanks
Mike

Hi @mike.hall - I’m participating in the Readability guidelines project and keeping an eye on the development of the icons topic which is gathering research. Not exactly an overlap with the UI icons we’re talking about here, but hopefully some of the research will help inform the development of these patterns.

Also, having an open all / close all button would help! Here’s what Croydon.gov.uk has released – Support for adults – and also a new pattern from alpha.ca.gov: Apply for disability insurance benefits.


image

Thanks Jennifer

I agree with the show all and collapse all, but I think that is a different pattern. With an accordion, when one panel opens, the already open panel closes.

With the Croydon UK example, the cursor changes to a hand as it’s a link in both cases, which I think is correct.

With the CA gov example, personally I think it’s quite confusing.

The hand changes to a cursor over the entire contents of the accordion (and if you click anywhere within it, it closes), but then if you roll-over a link within the content, it doesn’t change as it’s already a hand (therefore give you any additional clues as to how this text (the link) is different to the surrounding text).

Further, the 2 links within the panel have different treatments on roll-over the button like one (which is actually a link) has the background change and other link, the underline is removed. This discrepancy, along with the lack of change to a hand is a little confusing in my opinion.

@SeanElliott, any thoughts?

Thanks
Mike

1 Like