Page MenuHomePhabricator

Use `not-allowed` cursor for disabled elements within WMF products
Closed, DeclinedPublic


Alongside improving disabled state colors towards addressing accessibility issues, a further improvement might be using cursor: not-allowed for disabled UI items like menu options or buttons.
Color should –if possible– not be the only way of conveying information.

Browser compatibility is given. Bootstrap does it since v. 3.2.

This task is meant for having a general discussion, if we find agreement on the usefulness and as reference for linked blocking tasks in various products.

Event Timeline

Volker_E created this task.Dec 19 2015, 1:16 AM
Volker_E claimed this task.
Volker_E raised the priority of this task from to Needs Triage.
Volker_E updated the task description. (Show Details)
Volker_E added subscribers: Volker_E, Quiddity, TheDJ and 2 others.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptDec 19 2015, 1:16 AM
Volker_E updated the task description. (Show Details)Dec 19 2015, 1:24 AM
Volker_E set Security to None.
Elitre added a subscriber: Elitre.Dec 24 2015, 1:24 PM
Volker_E added a comment.EditedJan 8 2016, 11:32 PM

Complementary information: Another usage of this approach are disabled UI elements in Firefox Preferences (at least v43).

One thing to take into consideration is, that on Windows (at least up to Windows 7) the not-allowed cursor is a full size disallow icon. Unlike Mac OS X, where it's a normal cursor accompanied with a disallow icon. Compare MDN article.
To my knowledge, the full disallow icon is never shown in a disabled menu-item or button context on Windows GUI. Firefox does use it at the Preferences dialogs on buttons.

While the semantics of this seem sensible at first glance, I'm not sure this common practice anywhere. I think not-allowed is only ever used for drag and drop interactions.

...Indeed the rendering of not-allowed on my system is the drag and drop "grab hand" - with a struck circle next to it.

@Esanders To complete the picture, what is your system? And yes, those cursors are predominantly used for drag and drop interactions in operating system GUI, but for Firefox Preferences across platforms (your's as well?) and in Bootstrap. If one finds another prominent example, here's the place to collect them.

Chrome+Ubuntu. I see its used by bootstrap but maybe we should wait for it to become more common rather than trying to be trendsetters.

The Windows 7 'not-allowed' cursor is super scary looking.

I'm with @Esanders, I'm not convinced we should be doing this even if it makes sense semantically. The browser/OS behavior is too inconsistent.

Volker_E updated the task description. (Show Details)Jan 11 2016, 8:03 PM

The cursor feels like grabbing too much attention. To indicate disabled items it seems more appropriate to reduce their prominence level, rather than increasing it. I'd explore approaches that involve reducing the prominence of disabled elements (e.g., on hover as suggested at T89271#1930266)

Added my response at T89271, let's talk there.

Danny_B moved this task from Unsorted to Cursor on the Accessibility board.Jan 22 2016, 9:23 PM

Following @Pginer-WMF argumentation in not giving disabled elements more focus.
Furthermore, Mozilla devs have decided to remove not-allowed cursor from their settings pages in upcoming Firefox 45. Given the various opposing arguments and implications, it's better to close this issue.
@violetto would you please update M101 accordingly and exchange the not-allowed cursor with a default one?